canvas使用

canvas

<canvas> 标签定义图形，比如图表和其他图像。

http://www.w3school.com.cn/tags/html_ref_canvas.asp

创建Canvas元素

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
必须在标签中设置width和height，不可用css或style设置。
规定元素的 id、宽度和高度：

    <canvas id="myCanvas" width="200" height="100"></canvas>

通过JavaScript来绘制

//2d，它指定了二维绘图；返回值：一个CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中。
CanvasDocument.getContext(contextID); 

属性	语法	描述
fillStyle	context.fillStyle=color|gradient|pattern;	设置或返回用于填充绘画的颜色、渐变或模式 。gradient为下面的createLinearGradient()和createRadialGradient()。
strokeStyle	context.strokeStyle=color|gradient|pattern;	设置或返回用于笔触的颜色、渐变或模式。即修改shroke()默认的样式。
shadowColor		设置或返回用于阴影的颜色。
shadowOffsetX		设置或返回形状与阴影的水平距离。 正数在右边，负数在左边。
shadowOffsetY		设置或返回阴影距形状的垂直距离 。
shadowBlur	context.shadowBlur=number;	设置或返回阴影的模糊级数。
方法	语法	描述
createLinearGradient()	context.createLinearGradient(x0,y0,x1,y1);	创建线性渐变（用在画布内容上），需配合addColorStop()使用
createRadialGradient()	context.createRadialGradient(x0,y0,r0,x1,y1,r1);	创建放射状/环形的渐变（用在画布内容上），分别为开始x、y、半径，和结束x、y、半径。
addColorStop()	gradient.addColorStop(stop,color);	规定 gradient 对象中的颜色和位置。stop 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。 color 在结束位置显示的 CSS 颜色值 。

// 获取标签和获取绘制环境
var cas = document.querySelector('canvas');
var ctx = cas.getContext('2d');
// 填充颜色（必须在绘制之前）
ctx.fillStyle = "#ff0"
// 绘制矩形;分别为左上角x,y,width,height
ctx.fillRect(100,100,150,100);

线条样式

属性	语法	描述
lineCap	context.lineCap=“butt|round|square”; butt 默认，向线条的每个末端添加平直的边缘。round 向线条的每个末端添加圆形线帽。square 向线条的每个末端添加正方形线帽。	设置或返回线条的结束端点样式 。
lineJoin	context.lineJoin=“bevel|round|miter”; bevel 创建斜角。 round创建圆角。miter默认，创建尖角。	设置或返回两条线相交时，所创建的拐角类型
lineWidth	context.lineWidth=number;	设置或返回当前的线条宽度
lineDashoffset		设置虚线偏移量（负值向右偏移）
setLineDash()	context.setLineDash(数组); 数组包含实线宽度、空虚长度。	设置虚线
getLineDash()		获取虚线宽度集合

路径

路径为虚拟的线，不填充或不绘制是看不见的。

方法	语法	描述
fill()		填充当前的图像（路径）。默认颜色是黑色。
stroke()		会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
moveTo()	context.moveTo(x,y);	把路径移动到画布中的指定点，不创建线条
lineTo()	context.lineTo(x,y);	添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。
arc()	context.arc(圆心x, 圆心y, r, 开始角, 结束角, 方向);	创建弧/曲线（用于创建圆或部分圆）。角度以弧度计，360度为2π。 方向true为顺时针，反之逆时针。要注意圆心与moveTo一致。
beginPath()		开始一条路径，或重置当前的路径。
closePath()		创建从当前点到开始点的路径。

**（fill()填充注意）非零环绕规则：**在填充的面里拉一条线出去，被一条顺时针方向的线相交加一，逆时针方向的减一，最终总和非0则填充，反之不填充。

所有曲线都是由遍历加公式得来的。

//镂空正方形
ctx.moveTo(100,100);
ctx.lineTo(100,300);
ctx.lineTo(300,300);
ctx.lineTo(300,100);
ctx.closePath();
// 非零环绕规则
ctx.moveTo(150,150);
ctx.lineTo(250,150);
ctx.lineTo(250,250);
ctx.lineTo(150,250);
// 结束路径
ctx.closePath();
// 填充（路径为虚拟的线，不填充看不见）
ctx.fill();

//绘制圆
// 开始路径
ctx.beginPath();
// 绘制圆形
// arc(圆点x,y,半径,开始角,结束角（弧度）);
// 因为它的开始点不是从圆点画起，会出现缺失情况，因而要把开始点移到圆点
ctx.moveTo(250,150);
ctx.arc(250,150,100,toDeg(0),toDeg(270));
// 结束路径
ctx.closePath();
// 填充（路径为虚拟的线，不填充看不见）
ctx.fillStyle = "#ff0";
ctx.fill();
// 将角度转化为弧度
function toDeg(r) {
    return r*Math.PI/180;
}

矩形

方法	语法	描述
rect()	context.rect(x,y,width,height); x左上角x坐标，y左上角y坐标，width、height分别为长和宽。	创建矩形，没有独立路径会影响其他图形描绘。
strokeRect()	context.strokeRect(x,y,width,height);	绘制“被填充”的矩形，默认黑色。有独立路径不会影响其他图形描绘。
fillRect()	context.fillRect(x,y,width,height);	绘制矩形（无填充），默认黑色。有独立路径不会影响其他图形描绘。
clearRect()	context.clearRect(x,y,width,height);	在给定的矩形内**清除指定的像素 **

文字

属性	语法	描述
font	context.font=“italic small-caps bold 12px arial”;	设置或返回文本内容的当前字体属性
textAlign	context.textAlign=“center|end|left|right|start”; start默认。	设置或返回文本内容的**当前对齐方式 **，基于起始坐标对齐。
textBaseline	context.textBaseline="alphabetic默认，普通字母基线|top em方框的顶端 |hanging 默认，悬挂基线 |middle em方框的正中 |ideographic 默认，表意基线 |bottom em方框的底端 ";	设置或返回在绘制文本时使用的当前文本基线
direction	context.direction=“ltr | rtl”; 如果是ltr，start与left对齐方式一致，如果是rtl，start与right对齐方式一致。	**文本的方向 / 书写方向。**少用。
方法	语法	描述
fillText()	context.fillText(text,x,y,maxWidth); text 规定在画布上输出的文本；x、y 开始绘制文本的 x、y 坐标位置（相对于画布）。 maxWidth 可选，允许的最大文本宽度，以像素计。	在画布上绘制**“被填充的”文本** ，默认黑色。
strokeText()	context.strokeText(text,x,y,maxWidth);	在画布上绘制文本（无填充），默认黑色。
measureText()	context.measureText(text).width;	返回包含指定文本宽度的对象

// 绘制文字
ctx.font = "20px pinghei"; // 设置字体
ctx.textAlign = "center"; // 设置对齐
ctx.fillText("传智播客",250,150); //绘制

图像绘制

方法	语法	描述
drawImage()	context.drawImage(img,x,y); context.drawImage(img,x,y,width,height); context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);参数详情如下图	向画布上绘制图像、画布或视频

// 绘制图片
// 导入图片对象
var img = new Image();
img.onload = function (ev) { //必须加载才可以看到
// 绘制图片
// drawImage(图像对象,x,y,width，height);
    ctx.drawImage(img, 0, 0, 200, 100);
}
img.src = "./images/01.jpg";

转换

方法	语法	描述
scale()	context.scale(scalewidth,scaleheight);	缩放当前绘图，更大或更小。所有之后的绘图也会被缩放。定位也会被缩放。 1为100%，1.5为150%，以此类推。
ratate()	context.rotate(angle);	旋转当前的绘图。 弧度制。
translate()	context.translate(x,y);	重新映射画布上的 (0,0) 位置。