canvas的画图api运用详解-
canvas可以绘制出许多巧妙的样式和优美的结果，通过几个简略的api就可以在画布上呈现出瞬息万变的结果，还可以制作网页游戏，接下来就总结一下和画图有关的API。
绘画的时候canvas相当于画布，而context相当于画笔。
1.绘制线条
moveTo(x0,y0)：把目前画笔（ictx）挪移到（x0,y0）这个位置。
lineTo(x1,y1):从目前位置(x0,y0)处到（x1，y1）画一条直线。
beginPath()：开启一条途径或者重置目前途径。
closePath():从目前点回到途径起始点，也就是上一个beginPath的位置,逃避和途径。
stroke():绘制。必需加了这个函数才会绘图，所以这个一定要放在最后。
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();结果：
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，否则不断会以首先个为根基会话，在最后的stroke的时候，会再次画一条玄色的歪线，一共3条线。
ictx.strokeStyle="#000000";
ictx.lineCap="butt";
ictx.lineWidth=10;
ictx.moveTo(80,10);
ictx.lineTo(10,80);
ictx.stroke();beginPath和closePath可以不可对涌现，两者之间险些没有关系，closePath是用来闭合终点和起始点画一条闭合途径的。
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();
绘制曲线的起点和水平线完毕点与设定的首先个点的连线相切，曲线的终点和首先个设定点与第二个设定点的连线相切。
quadraticCurveTo(x1,y1,x2,y2):二次贝塞尔曲线。（x1，y1）控制点的坐标，（x2，y2）完毕点的坐标
bezierCurveTo(x1,y1,x2,y2,x,y):三次贝塞尔曲线。（x1，y1）控制点1的坐标，（x2，y2）控制点2的坐标 （x,y）完毕点的坐标。
贝塞尔曲线在绘制一些非常流通的曲线时非常实用。
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=-10; 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;//这里渐变是一个对象，用来向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是一个图片对象，背面的参数是用来设置图片的反复方式。
9.其他相干API
fill():添补目前途径。
isPointInPath():ictx.isPointInPath(x,y);推断这个点可否位于目前途径
革除画布办法：猎取画布的宽高，icanvas.height,icanvas.width;然后运用clearRect();
修改画布的宽高：icanvas.width='200'；icanvas.width='300'的办法。
globalAlpha:设定透亮度，只能是0~1的数字，要是透亮度不同，在画第二幅以前从新设定即可。
toDataURL:icanvas.toDataURL(type,encoderOptions)，这个函数返回一个image的base64的URI，参数都是可选的，type可以设定图片类型如image/jpeg,image/webp，默许是image/png；encoderOptions是一个0~1的数字，用来设定image/jpeg,image/webp的图片质量，其他格局的type设定这个参数无效。
10.剪裁
clip():从画布中剪裁任意外形和尺寸的画布，之后所有的画图都会被限定在剪裁的区域内。这个办法平常和绘制矩形，圆形等途径一起运用，在这些办法背面，剪切这个图像，后来画的就必需在这个剪切后的画布上了。
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);
Node.js怎样开发微信墙
以上就是canvas的画图api运用详解的细致内容，更多请关注 百分百源码网 其它相干文章！
