canvas基础知识

最新推荐文章于 2022-04-17 22:30:41 发布

weixin_33978016

最新推荐文章于 2022-04-17 22:30:41 发布

阅读量128

点赞数

原文链接：https://segmentfault.com/a/1190000009783474

版权

一、canvas 基础知识：

1、基础知识

代码示例

var canvas = document.getElementById('canvas'),  //获取canvas元素
    context = canvas.getContext('2d');          //获取画图环境，指明为2d
    
    // 1,基础知识
    context.fillStyle='rgb(0,255,0)';
    context.fillRect(0,0,200,200);

2、线条

        context.lineWidth = 5; // 线条宽度
        context.beginPath();
        context.moveTo(40,40);
        context.lineTo(340,40);
        context.closePath();
        context.stroke();// 绘制出轮廓

3、圆形

context.arc(x,y,radius,startAngle,endAngle,anticlockwise);

    context.beginPath();
    context.arc(230,90,50,0,Math.PI*2,false);
    context.closePath();
    context.fill();// 填充路径

4、填充颜色

    context.fillStyle = 'rgb(255,0,0)';
    context.fillRect(40,40,100,100);

5、描边：

    context.strokeStyle = 'rgb(255,0,0)';
    context.strokeRect(40,40,100,100);

6、绘制文字

    var text = 'Zeng tian sheng';
    context.font = '30px serif';
    context.fillText(text,40,40); // 绘制文字
    //context.strokeText(text,40,40); // 绘制描边文字

7、清除 canvas

context.clearRect(0,0,100,100);

二、canvas高级功能

1、保存和恢复绘图状态：代码示例

    context.fillStyle = 'rgb(255,0,0)';
    context.save();  // 保存状态
    context.fillRect(0,0,50,50);
    
    context.fillStyle = 'rgb(0,255,255)';
    context.save();  // 保存状态
    context.fillRect(100,0,50,50);
    
    context.restore(); // 恢复状态
    context.fillRect(200,0,50,50);

你可以用栈的概览去理解保存和恢复绘图的状态，save() 将当前绘图层存入栈中，restore()取出栈顶的图层，后进先出。

2、平移

注意：平移的是像素值，100px

context.translate(100,100)

3、缩放

注意：缩放的是比例，下面代码是将图形宽高放大 2 倍

context.scale(2,2)

4、旋转

context.rotate(Math.PI/4);// 顺时针旋转 45'

5、矩阵 ?

(1)、transform()

transform(a, b, c, d, e, f)

    context.transform(2,0,2,150,150) ;// 平移+缩放
    context.fillRect(0,0,100,100)

(2)、setTransform(1,0,0,1,0,0)

需要重置矩阵才能进行下面的再次 transform（）

    context.transform(2,0,2,150,150) ;// 平移+缩放
    context.fillRect(0,0,100,100);
    
    context.setTransform(1,0,0,1,0,0);// 单位矩阵
    context.transform(2,0,2,150,150) ;// 平移+缩放
    context.fillRect(100,100,100,100)

6、全局透明度：globalAlpha

    context.fillStyle = 'rgb(255,0,0)';
    context.fillRect(0,0,50,50);

    context.globalAlpha = 0.5;
    
    context.fillStyle = 'rgb(0,255,255)';
    context.fillRect(25,25,50,50);

7、合成 : globalCompositeOperation

注意：上面的图层也有合成的效果，但都是使用默认的
context.globalCompositeOperation = 'source-over';
所以都是上一层覆盖下一层的效果

context.globalCompositeOperation = 'source-over|lighter ....';

更多请见示例代码

8、阴影示例代码

    context.fillStyle= 'rgb(0,255,0)';
    context.shadowBlur = 50;
    context.shadowColor = 'rgb(0,255,0)';
    context.shadowOffsetX = 2;
    context.shadowOffsetY = 2;
    context.arc(100,100,50,0,Math.PI*2,false);
    context.fill();

9、渐变

createLinearGradient(x1,y1,x2,y2); 渐变的起点个终点 ?

var gradient = context.createLinearGradient(10,10,50,100);
    gradient.addColorStop(0,'rgb(0,0,0)');
    gradient.addColorStop(1,'rgb(0,255,0)');
    context.fillStyle = gradient;  // gradient
    context.fillRect(0,0,100,100);

10、放射渐变：

createRadialGradient(x0,y0,r0,x1,y1,r1);

var gradient = context.createRadialGradient(300,300,10,100,100,50);
    gradient.addColorStop(0,'rgb(0,0,0)');
    gradient.addColorStop(1,'rgb(0,255,0)');
    context.fillStyle = gradient;
    context.fillRect(0,0,200,200);

11、复杂线路

    context.fillStyle = 'rgb(255,0,0)';
    context.beginPath();
    context.moveTo(100,50);
    context.lineTo(150,150);
    context.lineTo(50,150);
    context.closePath();
    context.stroke();
    context.fill();

12、贝塞尔曲线

二次贝塞尔只有一次弯曲，三次贝塞尔有两次弯曲 ?

(1)、二次贝塞尔 quadraticCurveTo(cpx ,cpy ,x ,y)

    context.lineWidth = 5;
    context.beginPath();
    context.moveTo(50,250);
    context.quadraticCurveTo(250,100,450,250);
    context.stroke();

(2)、三次贝塞尔 bezierCurveTo(cp1x, cpp1y, cp2x,cp2y, x, y)

    context.lineWidth = 5;
    context.beginPath();
    context.moveTo(50,250);
    context.bezierCurveTo(150,50,350,450,450,250);
    context.stroke();

13、加载图像

 var image = new Image();
    image.src = 'https://avatars3.githubusercontent.com/u/15622519?v=3&u=48049875e3e38cfc9499bda745ec77b1c000066d&s=400';
    image.onload = function () {
        context.drawImage(image,0,0);
    }

(1)、调整图片大小

context.drawImage(image,x,y,width,height);

(2)、裁剪图片

context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

14、终极绝招，一切皆像素点 ? ? ?

（1）、获取canvas的像素值

访问像素值 / 一个像素点有4个值 rgba

可以拿到像素点对其进行一定比例的改变像素值从而得到比如灰度的图片,不同色调的图片等 ?

var imgData = context.getImageData(x,y,width,height);
    var pixel = imgData.data; // 得到一个数组像素
    var red = pixel[0];
    var green = pixel[1];
    var blue = pixel[2];
    var alpha = pixel[3];

（2）用像素点绘制图像

 var imgdata = context.createImageData(200,200);
    var pixel = imgdata.data;
    var numpixel = imgdata.width*imgdata.height;
    for(i=0;i<numpixel;i++){
        pixel[i*4] = Math.floor(Math.random()*255);
        pixel[i*4+1] = Math.floor(Math.random()*255);
        pixel[i*4+2] = Math.floor(Math.random()*255);
        pixel[i*4+3] = Math.floor(Math.random()*255);
    }
    context.putImageData(imgdata,0,0);

三、? 实战篇示例代码