闲来玩十三水规律|十三水马牌赢了怎么算|

HTML5画直线



Ctx绘制路径的步骤是以下4步


1. 调用CanvasRenderingContext2D对象的beginPath()方法开始定义路径。

2. 调用CanvasRenderingContext2D的各种方法添加路径,比如添加一段弧或者贝赛尔曲线。

3. 调用CanvasRenderingContext2D的closePath方法关闭路径。

4. 调用CanvasRenderingContext2D的fill()或stroke()方法来填充路径或绘制路径边框。fill()就是画一个实心的;stroke()是画一个空心的。

虽然HTML5里面,没有提供绘制,比如说?#21644;?#22278;、圆这些几何图形。所以这些知识都要用路径来绘制。



如何画线(添加路径方法)


1. arc() 方法创建弧/曲线(用于创建圆或部分圆)。

2. arcTo()  方法在画布上创建介于两个切线之间的弧/曲线。

3. bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点,向当前路径添加一个点。方法在画布上创建介于两个切线之间的弧/曲线。

4. lineTo() 方法添加一个新点,然后创建从该点到画布中最后指定点的线条(该方法并不会创建线条)。

5. moveTo 把路径移动到画布中的指定点,不创建线条。

6. quadraticCurveTo() 方法通过使用表?#24452;?#27425;贝塞尔曲线的指定控制点,向当前路径添加一个点。

7. rect() 方法创建矩形。



基础要掌握的方法


1. moveTo 把路径移动到画布中的指定点,不创建线条。

2. lineTo() 方法添加一个新点,然后创建从该点到画布中最后指定点的线条(该方法并不会创建线条)


那我们?#19994;紿TML5的参考手册,查看绘制路径的属性、方法表。

HTML5-1.png



代码演示:路径(线条)绘制


1.  复制项目index5.html文件,?#31243;?#37325;命名为index6.html


HTML5-2.png


2. 打开index6.html,前面这些我?#23884;?#21024;掉


HTML5-3.png


3. 首先我们调用moveTo方法,移动画?#23454;阶?#26631;点(80,80)


ctx.moveTo(80,80);


4. 其次,使用lineTo方法,将线条画到指定位置(200,200)


ctx.lineTo(200,200);


5. 我们在开始路径之前,在moveTo方法前面还要调用beginPath方法


ctx.beginPath();

HTML5-4.png


6. 这样,路径就添加好了,在绘制完成之后,还需要使用closePath方法关闭路径


HTML5-5.png


7. 路径关闭之后,设置该路径的填充的颜色


ctx.fillStyle=”orange”;


8. 然后正式开始填充路径,fill就是实心的


HTML5-6.png


9. 运行效果是一片空白,所以说这个线是没办法填充的,所以fillStyle和fill就没用,我?#21069;?#23427;删除掉。


HTML5-7.png


10. 我们应该使用strokeStyle和stroke这两个方法来绘制这条路径。


HTML5-8.png


运行效果查看,成功的绘制除了一条橙色的线(路径)。


HTML5-9.png


11. 如果我们要设置线条的宽度,可以这样设置


ctx.lineWidth=10;

运行效果如下


HTML5-10.png


我?#21069;?#36825;个出现设置小一点儿:ctx.lineWidth=5;


HTML5-11.png


moveTo和lineTo是怎么配合的呢?


  1.  先把路径坐标移动到这里?#30784;?/p>


    HTML5-12.png


    moveTo并没有画线。


2. lineTo 200*200,那就是从80*80到200*200,画一条线,这两个配合使用。


HTML5-13.png



代码演练:rect(),矩形的绘制


1. 使用ctx对象的rect()方法,不是fillRect(),而是rect()

x坐标:60;y坐标:60;宽度:100;高度:45。
ctx.rect(60,60,100,45);


2. 画矩形,我们得把这个放到绘制的路径当中去,要在路径?#24418;?#20851;闭之前


HTML5-14.png


3. 运行查看效果


HTML5-15.png


一定要注意这个顺序:beginPath,然后填充路径,然后closePath,然后再画。



【本文由麦子学院独?#20197;?#21019;,转载请注明出处并保留原文链接】

logo
? 2012-2016 www.znlucv.tw
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部

闲来玩十三水规律
正版四不像曾夫人论坛 手机管家婆27735手机.论坛 中福快三在线稳赢计划 红魔3肖六码 快乐十分乘法公式 湖北快三投注技巧 时时彩前三稳赚方法 双色球天津那期中了12注 pk10最牛七码单期中 彩票幸运飞航计划软件