canvas能够绘图出许多奇特的款式和漂亮的实际效果，根据几个简易的api便可以在画布上展现出千姿百态的实际效果，还能够制做网页页面手机游戏，接下来就总结1下和制图相关的API。
美术绘画的情况下canvas非常于画布，而context非常于画笔。
1.绘图线条
moveTo(x0,y0)：把当今画笔（ictx）挪动到（x0,y0）这个部位。
lineTo(x1,y1):从当今部位(x0,y0)处到（x1，y1）画1条平行线。
beginPath()：打开1条相对路径或重设当今相对路径。
closePath():从当今点返回相对路径起止点，也便是上1个beginPath的部位,逃避和相对路径。
stroke():绘图。务必加了这个涵数才会画图，因此这个1定要放在最终。
var icanvas=document.getElementById("iCanvas");
var ictx=icanvas.getContext("2d");
ictx.beginPath();
ictx.moveTo(0,0);
ictx.lineTo(300,150);
ictx.lineTo(3,150);
ictx.closePath();
ictx.stroke();
实际效果：
这里要留意，假如closepath放在stroke涵数后边，则不容易绘图成1个闭合的线条，由于在闭合前，早已绘图了，因此左侧那条平行线不容易画出来。
2.线条款式
lineCap：线条节点款式,butt,round,square。
lineJoin：两线条交叉时的拐点款式，在其中设定为miter时还能够根据miterLimet设定拐点交界处处的最大长度。
miterLimet:假如斜接长度超出 miterLimit 的值，边角会以 lineJoin 的 "bevel" 种类来显示信息。
lineWidth：线条宽度
strokeStyle： 线条色调、渐变色(界定好的渐变色目标)、方式。 context.strokeStyle="#333";
var iCanvas=document.getElementById("iCanvas");
var ictx=iCanvas.getContext("2d");
ictx.beginPath();
ictx.strokeStyle="#0000ff";
ictx.lineWidth=20;
ictx.lineCap="round";
ictx.moveTo(10,10);
ictx.lineTo(80,80);
ictx.stroke();
ictx.beginPath();//在这里务必beginPath，要不然1直会以第1个为基本对话，在最终的stroke的情况下，会再度画1条黑色的斜线，1共3条线。
ictx.strokeStyle="#000000";
ictx.lineCap="butt";
ictx.lineWidth=10;
ictx.moveTo(80,10);
ictx.lineTo(10,80);
ictx.stroke();
beginPath和closePath能够不了对出現，二者之间基本上沒有关联，closePath是用来闭合终点站和起止点画1条闭合相对路径的。
3.绘图曲线图
arc(x,y,radius,startAngle,endAngle,anticlockwise):绘图曲线图，radius是曲线图半径，startAngle,endAngle刚开始角度和完毕角度，用的是弧度(Math.PI/180)*角度值，anticlockwise绘图方位；
arcTo(x1,y1,x2,y2,radius):绘图两切线以前的曲线图。
ictx.beginPath(); ictx.moveTo(20,20); // 建立刚开始点 ictx.lineTo(100,20); // 建立水平线 ictx.arcTo(150,20,150,70,50); // 建立弧 ictx.lineTo(150,120); // 建立竖直线 ictx.stroke();
绘图曲线图的起始点和水平线完毕点与设定的第1个点的连线相切，曲线图的终点站和第1个设定点与第2个设定点的连线相切。
quadraticCurveTo(x1,y1,x2,y2):2次贝塞尔曲线图。（x1，y1）操纵点的座标，（x2，y2）完毕点的座标
bezierCurveTo(x1,y1,x2,y2,x,y):3次贝塞尔曲线图。（x1，y1）操纵点1的座标，（x2，y2）操纵点2的座标 （x,y）完毕点的座标。
贝塞尔曲线图在绘图1些十分顺畅的曲线图时十分有效。
4.绘图矩形框及填充
rect():建立矩形框；
fillRect(x,y,width,height):绘图被填充的矩形框:(x,y)起止点，width，height矩形框宽高
strokeRect()：绘图矩形框线框
clearRect():消除掉矩形框。
ictx.fillStyle="#0000ff";//设置填充色调 ictx.fillRect(20,20,150,100); ictx.strokeRect(180,20,100,100);
5.画笔特性
fillStyle:设定填充的色调，渐变色或方式（patten）；
strokeStyle：画笔的色调，渐变色或方式
6.绘图黑影
shadowColor：黑影yanse
shadowBlur:模糊不清级別
shadowOffsetX：黑影的水平间距
shadowOffsetY：黑影的竖直间距
ictx.shadowBlur=20; ictx.shadowColor="#456"; ictx.shadowOffsetX=⑴0; ictx.shadowOffsetY=30;//先设定黑影再画矩形框 ictx.fillStyle="#108997"; ictx.fillRect(20,20,100,80); ictx.stroke();
7.绘图渐变色
createLinearGradient(x1,y1,x2,y2):绘图线形渐变色，(x1,y1)是渐变色的起止点，（x2,y2）是渐变色的终点站，部位不一样能够制做出竖直或水平渐变色。
createRadialGradient(x1,y1,r1,x2,y2,r2)：轴向渐变色：，(x1,y1)是渐变色的起止点圆心，r1是半径，（x2,y2）是渐变色的终点站，r2是完毕点半径;
两种渐变色都必须应用
addColorStop(stop,color)来设定渐变色全过程，stop是0.0到1.0的值。
var grd=ictx.createLinearGradient(0,0,170,0); grd.addColorStop(0,"#000"); grd.addColorStop(0.5,"#378923"); grd.addColorStop(1,"#ddd"); ictx.fillStyle=grd;//这里渐变色是1个目标，用来向fillstyle传值 ictx.fillRect(20,20,150,100); var grd=ictx.createRadialGradient(300,225,15,250,225,100); grd.addColorStop(0,"#345"); grd.addColorStop(1,"#fff"); ictx.fillStyle=grd; ictx.fillRect(200,150,150,100);
8.填充情况
createPattern(image,"repeat|repeat-x|repeat-y|no-repeat"):image是1个照片目标，后边的主要参数是用来设置照片的反复方法。
9.别的有关API
fill():填当做前相对路径。
isPointInPath():ictx.isPointInPath(x,y);分辨这个点是不是坐落于当今相对路径
消除画布方式：获得画布的宽高，icanvas.height,icanvas.width;随后应用clearRect();
改动画布的宽高：icanvas.width='200'；icanvas.width='300'的方式。
globalAlpha:设定全透明度，只能是0~1的数据，假如全透明度不1样，在画第2幅以前再次设定便可。
toDataURL:icanvas.toDataURL(type,encoderOptions)，这个涵数回到1个image的base64的URI，主要参数全是可选的，type能够设定照片种类如image/jpeg,image/webp，默认设置是image/png；encoderOptions是1个0~1的数据，用来设定image/jpeg,image/webp的照片品质，别的文件格式的type设定这个主要参数失效。
10.裁剪
clip():从画布中裁剪随意样子和规格的画布，以后全部的制图都会被限定在裁剪的地区内。这个方式一般和绘图矩形框，圆形等相对路径1起应用，在这些方式后边，裁切这个图象，后来画的就务必在这个裁切后的画布到了。
ictx.arc(100,100,50,(Math.PI/180)*0,(Math.PI/180)*360,true); ictx.stroke(); ictx.clip(); ictx.fillStyle="green"; ictx.fillRect(0,0,150,100);
假如还想实际操作外界的画布，在裁切前应用save()涵数储存，裁切后应用restore()涵数修复到以前储存的情况，可是正中间做的实际操作不容易消退哈。
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。