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

HTML5画切线间的弧


arc()方法是绘制一个圆以及圆的一部分。arcTo()方法在画布上创建介于两个切线之间的弧/曲线



原理演示


1.  启动画图工具


HTML5-1.png


2. 先把路径移动到这个点,然后从这个点到另外一个点画一条线


HTML5-2.png


3. 画了一条线之后,再来一个点,也就是拿3个点来确定的一个弧


HTML5-3.png


4. 这个弧就是它俩的切线


HTML5-4.png



代码演示:arcTo()方法的用法


代码初始的模板是这样的,我们在开始路径和结束路径的中间来编?#21019;?#30721;


HTML5-6.png


1) 首先是moveTo方法,将画笔移动到坐标点(100,60)


ctx.moveTo(100,60);


2) 然后调用arcTo方法,进行绘制


我们给这个弧线绘制这个三个点:


HTML5-7.png


我们先是移动到了左上角的那个点,arcTo就指定两个点。

ctx.arcTo(200,60,360,150);
这4个变量,其实就是两个点的坐标。


3) 运行看一下这个结果,什么都没有


HTML5-8.png


4) ?#21019;?#30721;,我们这里少了一个参数


HTML5-9.png


因为我们是3个点确定的一个弧,但是还缺少了一个这个弧的半径是多少,需要参数来确定


HTML5-10.png


5) 我们就给它一个半径参数


ctx.arcTo(200,60,260,150,20);

好,我们运行一下,刷新效果如下。


HTML5-11.png


6) 我们再将这个半径修改为60


ctx.arcTo(200,60,260,150,60);

同样的运行查看效果。


HTML5-12.png


就是分别是这3个点,在这两条线中间画一条弧线。


HTML5-13.png


7) 再比如说,我们把这个参数再次修改一下


ctx.arcTo(200,60,300,150,60);
再来运行一下。


HTML5-14.png


8) 最后,再次修改一下它的坐标参数,运行试试


ctx.arcTo(200,60,180,150,60);

这个是它的效果。


HTML5-15.png


就是这样的一条线,这是它的3个点。在这3个点连成的线段中,画出一个指定半径的且与两条线段都相切的弧线。


HTML5-16.png



绘制原理解释


1) 首先呢!我们使用moveTo,把点移动到这里来。


HTML5-17.png

2) 其次是arcTo,这个需要填写两个点的坐标,4个参数。


HTML5-18.png


3) 最后,还要给一个半径是多少的参数。


HTML5-19.png


所以这个用法还是比较简单的。

 


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

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

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

客服热线 400-862-8862

回到顶部

闲来玩十三水规律
北京pk10官网软件下载 压分分彩技巧 玩彩票快三怎么能赢 时时彩最高倍率网站 广东福利彩票实体店微信 赢了5万不走倒输90万 快速赚钱除了彩票 福彩3d断组怎么做 广东快乐十分稳赢大双 5个骰子怎么玩