canvas

1 基本用法

使用<canvas></canvas>元素，必须先设置width height ，指定绘图区域的大小。
调用getContext()，传入2d,取得2d上下文对象。
toDataURL()，可以导出图像。

<canvas id="drawing" width="200" height="200">你的浏览器不支持canvas</canvas>

2 2D上下文

2.1 填充和描边

fillStyle
strokeStyle
设置这两个值后，之后的填充和描边都会采用这两个样式，直到重新设置这两个值

let drawing = document.getElementById("drawing");
let ctx = drawing.getContext("2d")
// 设置这两个值后，之后的填充和描边都会采用这两个样式，知道重新设置这两个值
ctx.fillStyle = "#0000ff"; // 填充 蓝色
ctx.strokeStyle = "red"; // 描边 红色

2.2 绘制矩形

fillRect() 填充
strokeRect() 边框
clearRect() 清楚矩形
这三个函数都可以接受四个参数 矩形的x坐标 y坐标 宽度 高度，这些参数的单位都是像素

// 绘制矩形
ctx.fillRect(0 , 0 , 10 , 10); //  x y 宽 高
ctx.fillStyle = "red"; // 重新设置填充颜色
ctx.fillRect(10 , 10 , 10 , 10);

// 只有边框的矩形
ctx.strokeRect(20 , 20 , 10 , 10);

// 清除
ctx.clearRect(0 , 0 , 5 , 5);
ctx.clearRect(20 , 20 , 10 , 10);

2.3 绘制路径

要绘制路径，首先必须调用beginPath()方法
然后再通过下列方法来实际绘制路径：

• arc(x , y , radius, startAngle , endAngle , counterclockwise)
  以(x , y )为圆心，radius为半径， 起始角度，结束角度 ， 最后一个参数false表示顺时针，true为逆时针
• arcTo(x1 , y1 , x2 , y2 , radius)
  从上一点绘制一条弧线到(x2,y2)，并且半径为radius跨过(x1 , y1)
• bezierCurveTo(c1x , c1y , c2x, c2y , x , y)
  从上一点绘一条曲线到(x,y) , 并以(c1x , c1y) 和(c2x,c2y)为控制点
• lineTo(x , y)
  从上一点绘制一条直线到(x,y)
• moveTo(x , y)
  绘图游标移动到(x,y)不画线
• quadraticCurveTo(cx,cy,x,y)
  从上一点绘制一条二次曲线 ，到(x,y) 并以(cx,cy)为控制点
• rect(x,y, width,height)
  从(x,y)绘制一个矩形路径，路径

创建路径后，接下来有几种可能的选择

• 如果想绘制一条连接到路径起点的线条，用closePath()
• 如果路径已经完成，想用fillStyle填充它，可以调用fill()方法
• 调用stroke()对路径描边
• clip()创建一个剪切区域

let drawing = document.getElementById("drawing");
let ctx = drawing.getContext("2d")
// 绘制一个表盘
ctx.beginPath();
ctx.arc(100 , 100 , 99 , 0  ,  2 * Math.PI , false);
ctx.moveTo( 189 , 100)
ctx.arc(100 , 100 , 89 , 0 , 2 * Math.PI , false);
ctx.moveTo( 100 , 100)
ctx.lineTo(100 , 50)
ctx.moveTo( 100 , 100)
ctx.lineTo(70 , 100)
ctx.stroke(); // 路径描边

2.4 绘制文本

主要有两个方法
fillText()
strokeText()
这些方法都接受四个参数： 文本 ， x ， y ，可选的最大像素宽度

这两个方法以下三个属性为基础

• font 表示 文本样式 ， 大小 ，字体 。格式类似于CSS “10px Arial”
• textAlign 表示文本对齐方式：“start” “end” “left” “right” “center”
  建议使用"start" “end”
• textBaseline 表示文本的基线，可能的值有
  “top” “hanging” “middle” “alphabetic” “ideographic” “bottom”
  这几个属性都有默认值。

let drawing = document.getElementById("drawing");
let ctx = drawing.getContext("2d")
ctx.strokeStyle = "#0092D8"
// 绘制一个表盘
ctx.beginPath();
ctx.arc(100 , 100 , 99 , 0  ,  2 * Math.PI , false);
ctx.moveTo( 189 , 100)
ctx.arc(100 , 100 , 90 , 0 , 2 * Math.PI , false);
// 绘制指针
ctx.moveTo( 100 , 100)
ctx.lineTo(100 , 50)
ctx.moveTo( 100 , 100)
ctx.lineTo(70 , 100)
ctx.stroke(); // 路径描边

// 文本样式
let twelve = calcNity(12);
let three = calcNity(3);
let six = calcNity(6);
let nine = calcNity(9);

ctx.font = "10px bold";
ctx.strokeText("12" , twelve.x , twelve.y , 14);

ctx.strokeText("3" , three.x , three.y , 14)
ctx.strokeText("6" , six.x , six.y , 14)
ctx.strokeText("9" , nine.x , nine.y , 14)

// 计算12 3 6 9
function calcNity(num){
    let N = 27;
    let x , y ;
    switch (num) {
        case 12 : {
            x = 100 ;
            y = N; 
            break;
        };
        case 3 : {
            x = 200 - N ;
            y = 100; 
            break;
        };
        case 6 : {
            x = 100 ;
            y = 200 - N;
            break;
        };
        case 9 : {
            x = N ;
            y = 100;
            break;
        };
    }
    return {
        x , y
    }

}

2.5 变换

可以通过如下方法修改变换矩阵。

• ratate(angle), 围绕原点旋转图像angle角度
• scale(scaleX , scaleY) ，缩放图像 x方向乘以scaleX ， y方向乘以scaleY
• translate(x , y) 将坐标原点移动到(x,y)
• transform(m1_1, m1_2 , m2_1 , m2_1 , dx , dy)
  直接修改变换矩阵
• setTransform(m1_1, m1_2 , m2_1 , m2_1 , dx , dy)

2.6 绘制图像

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

2.7 阴影

2D上下文会根据一下几个属性的值，自动为形状或路径绘制出阴影

• shadowColor
• shadowOffsetX
• shadowOffsetY
• shadowBlur

let img = document.getElementById("img");
let drawing = document.getElementById("drawing");
let ctx = drawing.getContext("2d");
ctx.strokeStyle = "black";
ctx.strokeRect(0 , 0 , 200 , 200)
ctx.moveTo(0 ,100);
ctx.shadowColor = "red";
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 5;
ctx.lineTo(200 , 100);
ctx.stroke()

2.8 渐变

渐变由CanvasGradient实例表示，很容易通过2D上下文来创建和修改。

1. 创建渐变对象
   调用createLinearGradient(startX , startY , endX , endY)
   他会创建指定大小的渐变，并返回CanvasGradient的一个实例

let grad = ctx.createLinearGradient( 0 , 0 , 100 ,100);

2. addColorStop()指定色标
   两个参数 0~1的数值 ， css颜色值

grad.addColorStop(0 , "white");
grad.addColorStop(0.5 , "red");
grad.addColorStop(1 , "red");

3. 把fillStyle 或 strokeStyle设置为这个对象，从而使用渐变来描边或填充

ctx.strokeStyle = grad;
ctx.fillStyle = grad;

let drawing = document.getElementById("drawing");
let ctx = drawing.getContext("2d");
let grad = ctx.createLinearGradient( 50 , 50 , 100 ,100);
grad.addColorStop(0 , "white");
grad.addColorStop(0.5 , "red");
grad.addColorStop(1 , "red");
ctx.strokeStyle = grad;
ctx.fillStyle = grad;
ctx.fillRect(0 , 0 , 100 , 100)

径向渐变
createRadialGradient()
接受6个参数
起始圆的圆心(x,y),和半径
结束圆的圆心(x,y) 和半径

let img = document.getElementById("img");
let drawing = document.getElementById("drawing");
let ctx = drawing.getContext("2d");
// 同心圆
let grad = ctx.createRadialGradient(100 , 100 , 0 , 100 , 100 , 100);
grad.addColorStop(0 , "red");
grad.addColorStop(1 , "white");
ctx.fillStyle = grad;
ctx.fillRect(0 , 0 ,200 , 200)

2.9 模式

2.10 使用图像数据

getImageData(x,y,weight,height)
putImageData(imgData , 100 , 100 )

let img = document.getElementById("img");
let drawing = document.getElementById("drawing");
let ctx = drawing.getContext("2d");
let grad = ctx.createRadialGradient(100 , 100 , 0 , 100 , 100 , 100);
grad.addColorStop(0 , "red");
grad.addColorStop(1 , "white");
ctx.fillStyle = grad;
ctx.fillRect(0 , 0 ,200 , 200)

let imgData = ctx.getImageData(100 , 100, 10 , 10);
let data = imgData.data;
for(let i = 0 ; i < data.length ; i += 4){
    let red = data[i];
    let green = data[i+1];
    let blue = data[i+2];
    let alpha = data[i+3];
    let average = Math.floor((red + green + blue) / 3);

    data[i] = average;
    data[i+1] = average;
    data[i+2] = average;
}
imgData.data = data;
ctx.putImageData(imgData , 100 , 100 )

2.11 合成

globalAplha 0~1 指定所有绘制的透明度

let drawing = document.getElementById("drawing");
let ctx = drawing.getContext("2d");
ctx.fillStyle = "black";
ctx.globalAlpha = 0.5;
ctx.fillRect(0 , 0, 200 ,200)

globalCompositionOperation
表示后绘制的图形怎样与先绘制的图形结合
可能的值：

• source-over
• source-in
• source-out
  等等。。。。