canvas：html5 中的一个元素标签，使用js在网页上进行绘图。
canvas 是一个矩形区域，有多种绘图路径：圆形、矩形、多边形
创建canvas标签的步骤：
html 页面: <canvas id="canvas"> 你的浏览器暂不支持 canvas 标签 </canvas>
css：canvas 标签和其他标签一样支持css样式
js：绘图部分是在 js 中完成的。canvas本身不具备绘图能力，需要 js 支持。
1.首先获取 html 页面中的 canvas 标签
var canvas = getElementById(" canvas ");
2.创建 context 对象
在创建 context 对象时，首先需要判断浏览器是否支持 canvas 标签。
if（canvas.getContext（"2d"））
如果该对象存在，则开始绘图。
var cxt = canvas.getContext( "2d" )
3.绘图
cxt.moveTo(x,y) --- 相当于虚拟笔尖开始的位置
canvas有两个属性 width、height,设置画布大小。
canvas.width = "700";
canvas = "500";
直线：使用 lineTo 绘制直线。cxt.lineTo(x1,y1) 绘制一条从 (x,y) 到 (x1,y1) 的一条直线，这只是你有绘制这样一条线的意图，是设置直线的状态，真正绘制需要使用 cxt.stroke()
绘制多边形则是将多条线段连接在一起。
绘制线条的样式：cxt.lineWidth 绘制线条的宽度，注意：不带单位。
cxt.strokeStyle : " #005588 "，也可使用rgb（0,125,125）、red的形式设置颜色
线条的属性还有：lineCap、lineJoin、miterLimit
lineCap（线条两端的线）有三个可选属性：butt（默认）、round（圆角）、square（直角）
lineJoin（线条相交时的状态）有三种属性：miter（默认尖角）、bevel（斜交）、round（圆角）
当lineJoin设置为miter时，外角、内角的距离达到miterLimit（默认值为10）时，则显示bevel效果。
除了绘制图形外部线条以外，可以填充图形本身：cxt.fill()
填充的颜色设置：cxt.fillStyle = rgb(0,125,125)
绘制多个图像：每绘制一个图像，调用一次cxt.stroke()，所有的图像将被重绘一次。
为解决重复绘制的问题，需要用到 cxt.beginPath() 和 cxt.closePath()，之间的代码执行一次，之后调用cxt.stroke()时不会将其覆盖 。两者无需成对出现。
cxt.beginPath()：重新规划一个路径，清空之前的画布。
cxt.closePath()：将不封闭的图形起点、终点连接起来。对 cxt.fill 无用，cxt.fill() 自动连接成封闭图形。使用 cxt.stroke() 时，如果不想图形封闭起来，则去掉这句代码。
弧线：使用 cxt.art() 绘制弧线
在绘制弧线时，上面这张图是关键。图中标注的值是固定的。
cxt.arc( centerX , centerY, radius,starting angle,ending angle,anticlockwise = false)
圆心x坐标，圆心x坐标，半径 ， 起始弧度， 终点弧度， 默认顺时针绘制
starting angle / ending angle 的写法：2*Math.PI
cxt.arc( centerX , centerY, radius, 0*Math.PI, 1.5*Math.PI, anticlockwise = false) 顺时针绘制
cxt.arc( centerX , centerY, radius, 0*Math.PI, 1.5*Math.PI, anticlockwise = true) 逆时针绘制
图像：将图片绘制在画布上的步骤：
1.var img = new Image();
img.src=" xxx ";
图形变换：translate（图形的起始位置，位移操作）、rotate（旋转）、scale（缩放）
cxt.translate(100,100) 起始位置为（100,100）
cxt.translate(300,300) 起始位置为（400,400）而不是（300,300）
单条语句执行时不会有错误，但是当多条执行时，效果将会叠加。解决方案：使用cxt.save()、cxt.restore();两者成对出现，canvas状态的保存与恢复。在绘制图像前保存设置状态，在绘制结束时恢复绘制前的状态。
scale（缩放）：不仅会缩放图形大小，图形的边框也会被缩放
渐变：分为线性渐变 createLinearGradient 和径向渐变 createRadialGradient 两种
线性渐变：var grd = cxt.createLinearGradient (xstart,ystart,xend,yend); 两个坐标构成一条渐变色
grd.addColorStop( stop,color ); stop为关键色位置（取值从0.0 - 1.0 的浮点数），color为关键颜色
var grd = cxt.createLinearGradient 0,0,800,800); 倾斜渐变
// var grd = createLinearGradient 0,0,0,800); 垂直渐变
grd.addColorStop( 0.0,black );
grd.addColorStop( 0.5,red );
grd.addColorStop( 1.0,blue);
cxt.fillStyle = grd;
径向渐变：var grd = cxt.createRadialGradient (x0,y0,r0,x1,y1,r1);
以上为不间断的线条，如果想绘制间断的线条，则需要多次写moveTo（），将虚拟笔尖移到不同的位置。
注意：
当 lineWidth 设置了一定的宽度后，用lineTo绘制封闭图形有个瑕疵。即因为 lineWidth 不能完全封闭，有个三角是不能被封闭。解决：使用 cxt.closePath();
绘制有外边框的填充图时，应先填充内部颜色后，在绘制外边框。反过来的话，内部填充色会遮盖外边框。
网友评论