canvas基础知识

摘要：一基础知识基础知识代码示例获取元素获取画图环境，指明为基础知识线条线条宽度绘制出轮廓圆形填充路径填充颜色描边绘制文字绘制文字绘制描边文字清除二高级功能保存和恢复绘图状态代码示例保存状态保存状态恢复状态你可以用栈的概览去理解保存和恢复绘图的状

代码示例

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

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

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

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

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

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

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

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

    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()取出栈顶的图层，后进先出。

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

context.translate(100,100)

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

context.scale(2,2)

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

(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)

    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);

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

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

更多请见示例代码

    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();

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);

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);

    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();

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

(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();

 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)

（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

三、? 实战篇  示例代码