canvas

悠悠 2022-05-21 11:48 185阅读 0赞

#### 写在前面 ####

html5中, 新增了 canvas 元素, 用于绘制2d图形

#### 准备工作 ####

绘制之前, 需要在dom中加入canvas元素(canvas不指定宽高的情况下，默认为300px宽，150px高)

为canvas添加唯一id, 并且通过js获取到画布的绘图上下文环境cxt

canvas元素本身没有绘制功能, 需要借助js来完成

注意: 在绘制之前要为画布设置宽高值, 可以在dom上通过属性来设置, 也可在js中来设置

canvas中的绘图是基于状态的，整个过程先设置状态，最后进行具体绘制

<canvas id="myCanvas" width="500" height="500">您的浏览器不支持canvas</canvas>
    
    let myCanvas = document.getElementById('myCanvas');
    
    // myCanvas.width = 500;
    // myCanvas.height = 500;
    
    let ctx = myCanvas.getContext('2d');

#### 绘制方法 ####

1、绘制路径

moveTo(x, y)设置路径的起点

lineTo(x, y)设置路径的其他点

绘制的路径默认为透明的, 通过strokeStyle可以设置线条的颜色

如果绘制线条的终点与起点的坐标相同，则会形成封闭路径

如果要绘制多条独立的路径，彼此线条宽度，颜色，填充不相互影响。可以用beginPath(), closePath()

ctx.beginPath();            // 路径开始
     ctx.lineWidth = 1;          // 线条宽度
     ctx.fillStyle = 'yellow';   // 填充色
     ctx.strokeStyle = 'green';  // 线条颜色
     ctx.moveTo(100, 100);       // 起点位置
     ctx.lineTo(400, 400);       // 第二个点
     ctx.lineTo(100, 400);
     ctx.lineTo(100, 100);
     ctx.closePath();            // 路径结束
     ctx.stroke();               // 绘制
     ctx.fill();                 // 填充
     
     ctx.beginPath();            // 第二条路径开始
     ctx.lineWidth = 5;
     ctx.strokeStyle = 'red';
     ctx.moveTo(200, 100);
     ctx.lineTo(500, 400);
     ctx.closePath();            // 第二条路径结束
     ctx.stroke();

![70][]

2、绘制弧形

ctx.arc( centerX, centerY, radius, startAngle, endAngle, anticlockwise )用于绘制弧形

--> centerX : 圆形x坐标

--> centerY : 圆心y坐标

--> radius : 半径

--> startAngle : 起始弧度值

--> endAngle : 终止弧度值

--> anticlockwise :  绘制方向

anticlockwise 默认为false, 代表顺时针, 逆时针为true

注意1: 弧形中角度说明, 如下图

![70 1][]

ctx.arc(250, 250, 200, 0, 1.5 * Math.PI, false);   // 圆心(250, 250), 半径200, 从0, 绘制到1.5PI, 顺时针方向
     ctx.fillStyle = 'red';
     ctx.strokeStyle = 'green';
     // ctx.closePath();  如果这里添加closePath的话, 效果如下图二所示
     ctx.stroke();

注意2: beginPath() , 意为开始一段新的路径

closePath(), 意为结束当前路径, 首尾相连

二者不一定要成对出现

![70 2][]

3、绘制矩形

通过 ctx.rect( \[起点x坐标\], \[起点y坐标\], \[x轴方向绘制距离\], \[y轴方向绘制距离\] ), 绘制矩形.

注意:用上面的函数绘制的是个空心的矩形, 如果想要实心的矩形, 需要调用ctx.fill()来填充颜色

ctx.strokeStyle = 'red';
    ctx.lineWidth = 5;
    		
    ctx.fillStyle = 'yellow';
    ctx.rect(100, 100, 200, 300);   // 绘制矩形边框
    ctx.fill();			// 填充
    ctx.stroke();

![70 3][]

4、渐变

设置渐变起止点：let gad = ctx.createLinearGradient(x1, y1, x2, y2)

设置各点颜色：gad.addColorStop( \[偏移\], \[颜色值\]);

注：偏移可以简单理解为当前颜色所辐射的区域

1) 线性渐变

// 对角线性渐变 (下图一)
       let grd1 = ctx1.createLinearGradient(0,0,500,200); // 起点为画布左上角(0, 0), 终点为画布右下角(500, 200)
       grd1.addColorStop(0,'red');
       grd1.addColorStop(0.5,"green");
       grd1.addColorStop(1,"yellow");
       ctx1.fillStyle = grd1;
       ctx1.fillRect(0,0,500,200);
    		
    // 横线线型渐变 (下图二)
       let grd2 = ctx2.createLinearGradient(0,0,500,0);    // 起点为画布左上角(0, 0), 终点为画布右上角(500, 0)
       grd2.addColorStop(0,"#ff0039");
       grd2.addColorStop(0.2,"#ff00ea");
       grd2.addColorStop(0.4,"#3400ff");
       grd2.addColorStop(0.6,"#00f2ff");
       grd2.addColorStop(0.8,"#02ff00");
       grd2.addColorStop(1,"#ffed00");
       ctx2.fillStyle=grd2;
       ctx2.fillRect(0,0,500,200);

![70 4][]

2) 径向渐变

a、设置渐变起止点: let grd = ctx.createRadiaGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)

--> xStart : 起始点x坐标

--> yStart : 起始点y坐标

--> radiusStart : 起始点半径

--> xEnd : 终止点x坐标

--> yEnd : 终止点y坐标

--> radiusEnd : 终止点半径

b、设置颜色 : grd.addColorStop( \[偏移\], \[颜色值\] )

c、填充颜色

d、绘制圆形

e、绘制

let grd = ctx.createRadialGradient(150, 100, 0, 150, 100, 100);  // 起始圆心(150, 100), 起始半径0, 终止圆心(150, 100), 终止半径100
    grd.addColorStop(0, 'red');      // 起始圆红色填充
    grd.addColorStop(1, 'green');    // 终止圆绿色填充, 辐射范围为1
    ctx.fillStyle = grd;             // 填充上面设置的渐变色
    ctx.beginPath();
    ctx.arc(150, 100, 100, 0, Math.PI * 2, true);  // 绘制圆形            
    ctx.closePath();
    ctx.fill();    // 填充

![70 5][]

5、图片

ctx.drawImage( \[图片对象\], \[图片绘制起始点\], \[图片绘制终止点\]);

let myCanvas = document.getElementById('myCanvas');
    		
    myCanvas.width = '500';
    myCanvas.height = '200';
    let ctx = myCanvas.getContext('2d');
    
    let img = new Image(); // 新增图片对象, 并赋值
    img.src = 'http://img1.imgtn.bdimg.com/it/u=3342737063,3964532796&fm=27&gp=0.jpg';
    
    window.onload = function () {    // 注意图片是异步加载, 需要放在window.onload函数里面执行绘制操作
        // 对角线性渐变	
        ctx.drawImage(img, 0, 0);
    };

![70 6][]

[70]: /images/20220521/712b919717a34567b2c14f4fe79d9ef4.png
[70 1]: /images/20220521/f20b978fcfda4749a573ee8514f05577.png
[70 2]: /images/20220521/04fead7ef0e64cf4ba42bf4800c5c3c0.png
[70 3]: /images/20220521/6ce4d69f78ca48c59d461ca5b6783e63.png
[70 4]: /images/20220521/a5dbbcb815a147d2954c1ebfe1bea755.png
[70 5]: /images/20220521/2479d22e95754dae841424759d341ccb.png
[70 6]: /images/20220521/9b195361f3f74bd3b511dfdcc2ceff86.png