程序博客网 > 淘宝店铺banner全屏

H5的canvas画布使用

来源：互联网 发布：淘宝店铺banner全屏 编辑：程序博客网 时间：2024/06/06 11:02

H5的canvas

  • H5的canvas
    • 使用canvas画布
    • canvas上绘制图形
      • 绘制矩形
      • 绘制文字
      • 绘制其他不规则图形创建路径
        • 绘制矩形
        • 绘制圆形
        • 绘制弧形
        • 绘制直线
        • 绘制折线
        • 绘制多边形
    • canvas给绘制的图形设置样式
      • 设置样式
      • 设置渐变
      • 设置阴影
      • 设置线性
    • canvas中绘制图像
      • 绘制图像
      • 平铺图像
      • 切割图像
    • canvas中的变形

使用canvas画布

  • 定义canvas元素

    • 画布的长宽可以通过两种方式设置
      • 通过css样式来设置；
        • 注意：通过canvas绘制的图像的显示比例会变化；
        • 建议：不要使用css方式设置canvas的显示大小；
      • 直接通过html中的属性height和width来设置（推荐）； 
        <canvas id="stockGraph" width="150" height="150"></canvas>

  • 创建画布对象

    • 获取 < canvas> 元素，通过 < canvas> 元素,创建画布对象；
    • 使用getContext(‘2d’)函数，返回画布对象；
    • 利用画布对象进行图形的绘制； 
      // 获取HTML页面中的< canvas>元素var canvas = document.getElementById("canvas");/*通过< canvas>元素,创建画布对象使用getContext(type)函数,创建画布对象* 该函数返回画布对象* type参数* 设置当前创建的画布是2d还是3d* 注意* 参数选项是2d* 必须写成"2d"*/var context = canvas.getContext("2d");// 利用画布对象,进行绘制图形context.fillRect(10,10,100,100);

canvas上绘制图形

绘制矩形

  • 直接使用矩形方法
    • 绘制实心(填充)矩形；
      • fillRect(x,y,width,height)；
      • 参数：
        • x和y 绘制矩形的左上角的坐标值；
        • width 设置绘制矩形的宽度(单位为px)；
        • height 设置绘制矩形的高度(单位为px)；
    • 绘制空心(描边)矩形；
      • strokeRect(x,y,width,height)；
      • 参数：
        • x和y 绘制矩形的左上角的坐标值；
        • width 设置绘制矩形的宽度(单位为px)；
        • height 设置绘制矩形的高度(单位为px)；
    • 清除指定区域的矩形；
      • clearRect(x,y,width,height)；
      • 参数同上；

绘制文字

  • font 设置文字的属性（用法同 CSS 属性 font ）。
  • textAlign：水平对齐方式。
    • left ：基准线在左边；
    • center ：基准线在中间；
    • right ：基准线在右边；
  • textBaseline：垂直对齐方式。
    • top ：基准线在上边；
    • middle ：基准线在中间；
    • bottom ：基准线在下边；
    • hanging ：悬挂基线；
    • alphabetic ：字母基线。
  • 绘制实心文字
    • fillText(text,x,y)；
  • 绘制空心文字
    • strokeText(text,x,y)；
var canvas = document.getElementById('mycanvas');    var context = canvas.getContext('2d');    //绘制基准线    context.beginPath();    context.moveTo(10,100);    context.lineTo(800,100);    context.stroke();    //绘制基线    context.textBaseline = 'bottom';    context.fillText('我爱前端',0,100);    context.textBaseline = 'top';    context.fillText('我爱前端1',50,100);//    textBaseline 属性设置或返回在绘制文本时的当前文本基线。//    alphabetic    默认。文本基线是普通的字母基线。//    top   文本基线是 em 方框的顶端。//    hanging   文本基线是悬挂基线。//    middle    文本基线是 em 方框的正中。//    ideographic   文本基线是表意基线。//    bottom    文本基线是 em 方框的底端。//    textAlign 属性根据锚点，设置或返回文本内容的当前对齐方式。//    start     默认。文本在指定的位置开始。//    end   文本在指定的位置结束。//    center    文本的中心被放置在指定的位置。//    left  文本在指定的位置开始。//    right     文本在指定的位置结束。    context.beginPath();    context.moveTo(150,10);    context.lineTo(150,300);    context.stroke();    context.textAlign = 'center';    context.fillText('我爱前端2',150,50);    //设置文字样式    context.font = 'bold 48px 微软雅黑';    context.fillStyle = 'yellow';    //写文字    context.fillText('天气真好',250,100);

绘制其他不规则图形(创建路径)

绘制矩形

  • 1.调用 beginPath() 方法，创建新建一条路径。
  • 2.使用 rect(x, y, width, height) 方法，设置矩形的坐标值及宽度和高度。
    • x和y 表示矩形的左上角坐标值。
    • width和height 表示矩形的宽度和高度。
  • 3.通过 fill() 或 stroke() 方法进行绘制。

绘制圆形

  • 1.调用 beginPath() 方法，创建新建一条路径。

  • 2.使用 arc(x, y, radius, startAngle, endAngle, anticlockwise) 方法，设置矩形的坐标值及宽度和高度。

    • x和y 表示圆形的圆心坐标值。
    • radius 表示圆形的半径。
    • startAngle 表示绘制圆形的开始点，值为 0。
    • endAngle 表示绘制圆形的结束点，值为 Math.PI*2。
    • anticlockwise，表示是以顺时针还是以逆时针方式绘制圆形，Boolean值。（默认值为false，表示顺时针。）
  • 3.通过 fill() 或 stroke() 方法进行绘制。
//动态冒泡小球的案例<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        html,body{            margin: 0;        }    </style></head><body onload="init()" onresize="init()"><canvas id="mycanvas"></canvas></body><script>    function init() {        //设置画布        var canvas = document.getElementById('mycanvas');        canvas.width = document.documentElement.clientWidth;        canvas.height = document.documentElement.clientHeight;        var context = canvas.getContext('2d');        var width = canvas.width;        var height = canvas.height;        //创建小球构造函数        function Ball(h) {            this.x = Math.random()*(width-20)+10;            this.y= h+20;            this.red = parseInt(Math.random()*255);            this.green = parseInt(Math.random()*255);            this.blue = parseInt(Math.random()*255);            this.globalAlpha = 1;            //定义绘制小球的方法            this.paint = function () {                context.globalAlpha = this.globalAlpha;                context.fillStyle = 'rgb('+this.red+','+this.green+','+this.blue+')';                context.beginPath();                context.arc(this.x,this.y,20,0,Math.PI*2,true);                context.fill();            }            //定义小球动画方法            this.num = Math.random();            this.animate = function () {                this.y = this.y-this.num;                this.globalAlpha = this.globalAlpha - 0.001;            }        }        //定义数组，将创建的小球都放入        var balls = [];        setInterval(function () {            //创建小球对象，并且把创建好的小球都丢入数组中            var ball = new Ball(height);            balls.push(ball);        },10)        //设置动画，定时将小球移动，并且调整透明度        setInterval(function () {            context.clearRect(0,0,width,height);            //遍历数组中的小球，每个小球调用两个方法。            for(var i=0;i<balls.length;i++){                if(balls[i].globalAlpha <= 0){balls.splice(i,1);}                balls[i].paint();                balls[i].animate();            }        },10)    }</script></html>

绘制弧形

  • 类似圆形的绘制方式，只是第五个参数；
  • 值得注意的是：
    • 如果绘制的是空心弧形的话，在 arc() 方法调用后：
    • 如果使用 closePath() 方法的话，绘制的图形会自动将终点和起点连接成线。
    • 如果不用 closePath() 方法的话，绘制的图形会呈现开口状。

绘制直线

  • 1.调用 beginPath() 方法，创建新建一条路径。
  • 2.使用 moveTo(x, y) 方法，设置直线的起点坐标值。
  • 3.使用 lineTo(x, y) 方法，设置直线的终点坐标值。
  • 4.通过 stroke() 方法进行绘制。

绘制折线

  • 1.调用 beginPath() 方法，创建新建一条路径。
  • 2.使用 moveTo(x, y) 方法，设置直线的起点坐标值。
  • 3.使用 lineTo(x, y) 方法，设置直线的终点坐标值。
  • 4.通过 stroke() 方法进行绘制。

绘制多边形

  • 1.调用 beginPath() 方法，创建新建一条路径。
  • 2.使用 moveTo(x, y) 方法，设置直线的起点坐标值。
  • 3.使用 lineTo(x, y) 方法，设置直线的终点坐标值。
  • 4.调用 closePath() 方法，闭合当前绘制的路径。
  • 5.通过 fill() 或 stroke() 方法进行绘制。

canvas给绘制的图形设置样式

设置样式

  • fillStyle：设置填充样式
  • strokeStyle：设置描边样式
  • globalAlpha：设置透明度(0-1)
  • 值得注意的是：
    • 一定要先设置样式(颜色)，再绘制图形。
    • 每次改变样式(颜色),重新设置。
<canvas id="canvas" width="500px" height="500px"></canvas><script>var canvas = document.getElementById("canvas");var context = canvas.getContext('2d');// a. 设置填充样式context.fillStyle = "pink";// b. 绘制实心矩形context.fillRect(10,10,100,100);// 设置描边样式context.strokeStyle = "red";context.strokeRect(120,10,100,100);// 设置透明度context.globalAlpha = 0.5;context.fillRect(230,10,100,100);context.fillStyle = "black";context.globalAlpha = 0.1;context.fillRect(230,120,100,100);</script>

设置渐变

  • 线性渐变：

    • createLinearGradient(x1,y1,x2,y2)
    • 参数：
      • x1和y1 基准线的起点坐标值
      • x2和y2 基准线的终点坐标值
    var c = document.getElementById('mycanvas');var cxt = c.getContext('2d');//设置渐变对象var lg = cxt.createLinearGradient(10,10,300,300);lg.addColorStop(0,'#FF6666');lg.addColorStop(0.5,'#FFFF00');lg.addColorStop(1,'#0066CC');//设置绘制样式cxt.fillStyle = lg;//绘制图像cxt.fillRect(10,10,300,300);

  • 射线(扇形)渐变：

    • createRadialGradient(x1,y1,r1,x2,y2,r2)；
    • 参数：
      • x1和y1 第一个基准圆的圆心；
      • r1 第一个基准圆的半径；
      • x2和y2 第二个基准圆的圆心；
      • r2 第二个基准圆的半径； 
        var c = document.getElementById('mycanvas');var cxt = c.getContext('2d');//    设置渐变对象var lg = cxt.createRadialGradient(160,160,80,160,160,150);lg.addColorStop(0,'#FF6666');lg.addColorStop(0.5,'#FFFF00');lg.addColorStop(1,'#0066CC');cxt.fillStyle = lg;cxt.fillRect(10,10,300,300);

  • 设置渐变色

    • 通过线性渐变对象的 addColorStop() 方法设置偏移量和颜色
      • 设置线性渐变的颜色和位置
      • position - 设置颜色的位置
      • 值的范围为 0 - 1，color - 设置颜色 
        //设置文字样式context.font = 'bold 48px 微软雅黑';context.fillStyle = 'yellow';//设置阴影context.shadowColor = 'red';context.shadowBlur = 5;//模糊度context.shadowOffsetX = -10;context.shadowOffsetY = 10;//写文字context.fillText('天气真好',250,100);

设置阴影

  • shadowColor 设置阴影颜色。
  • shadowOffsetX 设置水平方向阴影。
  • shadowOffsetY 设置垂直方向阴影。
  • shadowBlur 设置阴影程度。

设置线性

  • 设置线宽
    • lineWidth ：指定线条粗细，默认值是1.0。
<canvas id="myCanvas" width="578" height="200"></canvas><script>var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');context.beginPath();context.moveTo(100, 150);context.lineTo(450, 50);context.lineWidth = 15;context.stroke();</script>

  • 设置端点形状

    • lineCap ：指定线条端点形状。
      • butt：默认，向线条的每个末端添加平直的边缘。
      • round：向线条的每个末端添加圆形线帽。
      • square：向线条的每个末端添加正方向线帽。
      • round 和 square 会使线条略变微长。

  • 设置交点形状

    • lineJoin ：指定两条线之间的连接点形状。
      • round：创建圆角。
      • bevel：创建斜角
      • miter：默认，创建尖角
<canvas id="myCanvas" width="578" height="200"></canvas><script>var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');// set line width for all linescontext.lineWidth = 25;// miter line join (left)context.beginPath();context.moveTo(99, 150);context.lineTo(149, 50);context.lineTo(199, 150);context.lineJoin = 'miter';context.stroke();// round line join (middle)context.beginPath();context.moveTo(239, 150);context.lineTo(289, 50);context.lineTo(339, 150);context.lineJoin = 'round';context.stroke();// bevel line join (right)context.beginPath();context.moveTo(379, 150);context.lineTo(429, 50);context.lineTo(479, 150);context.lineJoin = 'bevel';context.stroke();</script>

canvas中绘制图像

  • 获取图像几种方法：

    • 使用相同页面中的图片；
    • 使用相同页面中的其他canvas元素；
    • 可以脚本通过Image()构造函数创建图像；
    //引入一张外部图片var img = new Image();img.src = 'img/dahuangmao-05.png';

绘制图像

  • 绘制图像：使用drawImage()方法绘制图像

     drawImage(image, x, y,width,height)

    • 参数：其中 image 是上面获取并创建的image对象，x 和 y 是图片在目标 canvas 里准备放置的起始坐标，width和height是设置的绘制图像的宽度和高度。

      context.strokeRect(0,0,128,128);

    • 注意：若在绘制图像时图片还没加载完成，那什么都不会发生（在一些旧的浏览器中可能会抛出异常）。因此应该用load时间来保证不会在加载完毕之前使用这个图片。

      img.onload = function () {//绘制图片//四个参数代表：引入图片的资源，图片放置的初始水平位置，图片放置的垂直位置，图片的宽度，图片的高度       context.drawImage(img,0,0,128,128);    }

平铺图像

  • 平铺图像：将图片按照一定比例重复铺满整个规定区域；

    • 1.引入图片并创建图片对象；
    • 2.使用createPattern()，创建一个模式对象，来规定图片平铺模式；
      • 平铺方式（type）：
        • no-repeat ：不平铺；
        • repeat-x ：水平方向平铺；
        • repeat-y ：垂直方向平铺；
        • repeat ：全方向平铺；
    • 3.将该模式对象设置成绘制图像的样式；
    • 4.进行图像绘制；
    //1、引入图片并创建图片对象var imgvar img = new Image();img.src = '图片路径';img.onload = function () {    // 2、创建平铺模型对象，设置图片的平铺方式    var prn = context.createPattern(img,type);    //3、将平铺对象设置为需要绘制的图形样式    context.fillStyle = prn;    //4、进行绘制    context.fillRect(0,0,800,800);}

切割图像

  • 切割图像：按照一定方式对绘制的图形进行切割；

    • 1.调用 beginPath() 方法，创建一条路径；
    • 2.使用 rect() 或 arc() 方法，绘制切割后留下的形状；
    • 3.通过 clip() 方法进行切割；
    var canvas = document.getElementById('mycanvas');var context = canvas.getContext('2d');//引入一张外部图片var img = new Image();img.src = 'img/dahuangmao-05.png';//创建新的路径，作为切割的形状img.onload= function () {   context.drawImage(img,0,0,300,300);}//进行切割context.beginPath();context.rect(50,50,50,50);context.closePath();context.clip();

canvas中的变形

  • 可类比css3中的样式，注意：在canvas中的变形，操作的是画布，而非画布上的形状！
// 用canvas变形做出一个正方形旋转的动画练习 <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        canvas {            background-color: lightskyblue;        }    </style></head><body><canvas id="canvas" width="500px" height="300px"></canvas><script>    var canvas = document.getElementById('canvas');    var context = canvas.getContext('2d');    //将画布平移到原画布的中心位置，然后在此处画出一个矩形。    context.translate(250,150);    //注意此矩形的绘制原点在画布之外，所以设为矩形的父半宽和半高；    context.strokeRect(-100,-100,200,200);    //再绘制一条直线    context.beginPath();    context.moveTo(0,0);    context.lineTo(0,100);    context.stroke();    //开启定时器，作出动画效果；    setInterval(function () {        context.clearRect(-500,-300,1000,600);        //每次动一度        context.rotate(Math.PI/180);        //每动一度将矩形和直线重新绘制一遍        context.strokeRect(-100,-100,200,200);        context.beginPath();        context.moveTo(0,0);        context.lineTo(0,100);        context.stroke();    },10)</script></body></html>
阅读全文
0 0
淘宝店铺banner全屏 淘宝店铺banner全屏
原创粉丝点击
热门IT博客
校园网封闭游戏端口校园网封闭游戏端口
台风泰利 知乎台风泰利 知乎
mac pdf导出jpg
auto.js
js禁止文本框输入
java高级程序员面试题
连尚网络是干嘛用的
js数字拆分成数组
和淘宝类似的网站
安卓音乐播放器 知乎
淘宝历年销售额
惠州网络推广招聘
网络直销公司有哪些
求生之路2画质优化
淘宝宝贝优化在哪里改
单片机汇编比较数大小
怎么样注册农村淘宝
淘宝助理批量上传宝贝
最近淘宝生意很差2017
赵薇杀人知乎
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 送房喜话一到十 到喜啦婚宴预订网 运城到闻喜火车时刻表 西安到闻喜高铁时刻表 到喜了 送房喜话 喜啦网 到喜啦婚宴预定 婚宴到喜啦 到喜啦大礼包 到喜啦 礼包 到喜啦网怎么样 到喜啦结婚网 到喜啦怎么样 到喜啦婚 到喜啦婚庆 到喜啦婚宴预订 到喜啦礼包 喜玛啦雅 喜啦网站 倒喜啦 到喜啦订婚宴 到喜啦婚嫁网 到喜啦婚车 到喜啦 电话 到喜啦婚庆公司 到喜啦 怎么样 到喜啦婚庆策划 到喜啦网站怎么样 到喜啦地址 到喜啦 婚车 到喜啦 融资 到喜啦 娄轶 到喜啦婚宴网地址 到喜啦婚礼策划 到喜啦招聘 太后有喜摄正王当爹啦 预定婚宴酒席注意事项 重庆到家了网络科技有限公司 京东到家了 到家了怎么幽默回复

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里