帆布的绘图api怎么用

　　介绍

这篇文章给大家分享的是有关画布的绘图api怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

画布可以绘制出很多奇妙的样式和美丽的效果,通过几个简单的api就可以在画布上呈现出千变万化的效果,还可以制作网页游戏,接下来就总结一下和绘图有关的api。

绘画的时候帆布相当于画布,而上下文相当于画笔。

<强>

函数(x0, y0):把当前画笔(ictx)移动到(x0, y0)这个位置。

画线(x1, y1):从当前位置处(x0, y0)到(x1, y1)画一条直线。

beginPath():开启一条路径或者重置当前路径。

closePath():从当前点回到路径起始点,也就是上一个beginPath的位置,回避和路径。

中风():绘制。必须加了这个函数才会画的图,所以这个一定要放在最后。

var icanvas=. getelementbyid (“iCanvas"); 　　var ictx=icanvas.getContext (“2 d"); 　　ictx.beginPath (); 　　ictx.moveTo (0,0); 　　ictx.lineTo (300150); 　　ictx.lineTo (3150); 　　ictx.closePath (); 　　ictx.stroke ();

效果:

画布的绘图api怎么用“> </p> <p>这里要注意,如果closepath放在中风函数后面,则不会绘制成一个闭合的线条,因为在闭合前,已经绘制了,所以左边那条直线不会画出来。</p> <p> <强> </强> </p> <p> lineCap:线条端点样式,屁股,圆,正方形。</p> <p> <img src=

线宽:线条宽度

strokeStyle:线条颜色,渐变(定义好的渐变对象),模式。context.strokeStyle=? 333“;;

var iCanvas=. getelementbyid (“iCanvas"); 　　var ictx=iCanvas.getContext (“2 d"); 　　ictx.beginPath (); 　　ictx.strokeStyle=? 0000 ff"; 　　ictx.lineWidth=20; 　　ictx.lineCap=皉ound"; 　　ictx.moveTo (10,10); 　　ictx.lineTo (80、80); 　　ictx.stroke (); 　　ictx.beginPath();//在这里必须beginPath,不然一直会以第一个为基础会话,在最后的中风的时候,会再次画一条黑色的斜线,一共3条线。 　　ictx.strokeStyle=? 000000“; 　　ictx.lineCap=癰utt"; 　　ictx.lineWidth=10; 　　10 ictx.moveTo (80); 　　ictx.lineTo (80); 　　ictx.stroke ();

beginPath和closePath可以不成对出现,两者之间几乎没有关系,closePath是用来闭合终点和起始点画一条闭合路径的。

<强>

弧(x, y,半径,startAngle endAngle,逆时针方向):绘制曲线,半径是曲线半径,startAngle, endAngle开始角度和结束角度,用的是弧度(Math.PI/180) *角度值,逆时针绘制方向,

arcTo (x1, y1, x2, y2,半径):绘制两切线之前的曲线。

ictx.beginPath (); 　　ictx.moveTo (20、20);//创建开始点 　　20 ictx.lineTo (100);//创建水平线 　　ictx.arcTo (150、20150、70、50);//创建弧 　　ictx.lineTo (150120);//创建垂直线 　　ictx.stroke ();

绘制曲线的起点和水平线结束点与设置的第一个点的连线相切,曲线的终点和第一个设置点与第二个设置点的连线相切。

画布的绘图api怎么用“> </p> <p> quadraticCurveTo (x1, y1, x2, y2):二次贝塞尔曲线。(x1, y1)控制点的坐标,(x2, y2)结束点的坐标</p> <p> bezierCurveTo (x1, y1, x2, y2, x, y):三次贝塞尔曲线。(x1, y1)控制点1的坐标,(x2, y2)控制点2的坐标(x, y)结束点的坐标。</p> <p>贝塞尔曲线在绘制一些非常流畅的曲线时非常有用。</p> <p> <强> </强> </p> <p>矩形():创建矩形;</p> <p> fillRect (x, y,宽度、高度):绘制被填充的矩形:(x, y)起始点,宽度、高度矩形宽高</p> <p> strokeRect():绘制矩形线框</p> <p> clearRect():清除掉矩形。</p> <pre类= ictx.fillStyle=? 0000 ff";//设定填充颜色 　　ictx.fillRect (20150100); 　　ictx.strokeRect (180、20100100);

<强>

fillStyle:设置填充的颜色,渐变或模式(patten);

strokeStyle:画笔的颜色,渐变或者模式

<强>

shadowColor:阴影yanse

shadowBlur:模糊级别

shadowOffsetX:阴影的水平距离

帆布的绘图api怎么用