HTML5 Canvas

Canvas标签

JS 绘制 图形 动画var canvas =document.querySelector("#canvas0");
width height，设置Canvas画布大小canvas.width=500; canvas.height=500;
创建并返回一个CanvasRenderingContext2D对象 var context = canvas.getContext('2d');

属性

需在方法前设置

var canvas = context.canvas;只读属性，返回当前canvas元素

填充色：颜色 渐变色 图片context.fillStyle=color/gradient/pattern；
描边色context.strokeStyle = 'green';
线宽context.lineWidth = value;
线头端点:默认/圆弧/方框context.lineCap = 'butt' / 'round'/ 'square';

方法

开始路径 context.beginPath(); 关闭路径 context.closePath();
context.save() context.restore()
填充context.fill(); 描边context.stroke();
起始点 context.moveTo(x,y); 移动点context.lineTo(x,y);
整体变形 context.transform(a, b, c, d, e, f);
a水平缩放 b水平斜切 c垂直斜切。d垂直缩放。e水平位移。f垂直位移

变换中心点 translate(x,y)
围绕旋转中心顺时针旋转 canvas画布rotate(angle)
角度转弧度计算公式是：radian = degree * Math.PI / 180

检测路径 context.clip()

图形绘制

context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
img元素/canvas画布区域/图片区域

剪裁图片

context.createPattern(image, repetition);

•   参数1：imageObject
  

用来平铺的CanvasImageSource图像。可以是下面的类型：
HTMLImageElement，也就是元素。
HTMLVideoElement，也就是元素，例如捕获摄像头视频产生的图像信息。
HTMLCanvasElement
CanvasRenderingContext2D
ImageBitmap
ImageData
Blob

• 参数2 repetitionString
  

图案的平铺方式，可以是下面的值：
‘repeat’，水平和垂直平铺。(默认)
‘repeat-x’，仅水平平铺。
‘repeat-y’，仅垂直平铺。
‘no-repeat’，不平铺。

指定区域的像素信息

返回 ImageData var imagedata = context.getImageData(sx, sy, sWidth, sHeight);
返回四个值R，G，B，Aimagedata.data;
imagedata.width;``imagedata.height;

渐变颜色

创建渐变：var gradient = context.createRadialGradient();
设置岂止颜色 gradient.addColorStop(0-1,'颜色');
填充图案context.fillstyle=gradient;

1. 线性context.createLinearGradient(x0, y0, x1, y1)

// 创建渐变
   var linestyle=context.createLinearGradient(10,10,200,10);
    linestyle.addColorStop(0,'red');
    linestyle.addColorStop(1,'blue');
// 设置填充样式为渐变    
    context.fillStyle=linestyle;
    context.fillRect(10,10,200,100);//绘制矩形

2. 径向 context.createRadialGradient(x0, y0, r0, x1, y1, r1);

矩形fillRect

1. 绘制矩形 context.fillRect(x, y, width, height)
2. 矩形描边 context.strokeRect(x, y, width, height);

//像素宽矩形描边
context.lineWidth = 2;
context.strokeRect(75, 25, 150, 100);

3. 清除指定矩形区域内部所有的像素信息为初始色（通常为透明）
   清除区域context.clearRect(x, y, width, height);

线条stroke

    context.moveTo(10,10);//起点
    context.lineTo(200,10);//下一个点
    context.lineTo(300,300);
    context.lineTo(90,300);
    context.lineTo(10,10);
    context.lineWidth = 1;
    context.strokeStyle = 'red';
    context.fillStyle='blue';
    context.fill();//填充
    context.stroke();//描边

弧形 arc arcTo

context.arc(x, y, radius, startAngle, endAngle [, anticlockwise]); anticlockwise：true为逆时针startAngle-endAngle

 context.beginPath(); //开始路径
     context.fillStyle="green";
     context.arc(350,200,100,0,Math.PI*2,true);
     context.stroke();//绘制描边的
     context.fill();//使用样式填充圆的
     context.closePath();//闭合路径

文本

CanvasRenderingContext2D.font
设置字体相关样式，包括字号，字体信息。默认值是10px sans-serif。
CanvasRenderingContext2D.textAlign
设置文本水平对齐方式。支持属性值有：start（默认值），end，left，right以及center。
CanvasRenderingContext2D.textBaseline
设置文本基线对齐方式。支持属性值有：top，hanging，middle，alphabetic（默认值），ideographic，bottom。
CanvasRenderingContext2D.direction
设置文本显示方向。支持属性值有：inherit（默认值），ltr和rtl

文字fillText

1. 文字填充，可以填充纯色，渐变或者图案
   context.fillText(text, x, y [, maxWidth]) [, maxWidth])省略时自动长度
   context.wrapText('Canvas API中文网，不只是文档', 24, 56, 200);固定宽度时自动换行

//添加线性渐变的颜色
var line=context.createLinearGradient(200,100,300,150);		
     line.addColorStop(0,"blue");
     line.addColorStop(0.2,"red");
     line.addColorStop(0.4,"green");
     line.addColorStop(0.6,"orange");
     line.addColorStop(0.8,"yellow");
     line.addColorStop(1,"pink");
     context.fillStyle=line;
//文字样式     
context.font="30px SimSun, Songti SC";
//文字填充
context.fillText("Canvas",10,10,200);     

2. 文字描边
   context.strokeText(text, x, y [, maxWidth]);
   文本描边+文本填充（因为文字描边是居中描边，如果文本描边效果在上，会使填充的文字变得很细）

context.font = '50px STHeiti, SimHei';
context.lineWidth = 3;
context.strokeStyle = 'red';
context.strokeText('文字描边', 50, 90);//填充边
context.fillText('文字描边', 50, 90);//填充文字

3. 文字测量宽度
   返回TextMetrics对象，该对象的width属性值就是字符占据的宽度
   var textZh = context.measureText('帅');
var textEn = context.measureText('handsome');