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

HTML5画弧线


arc()不只是可以画弧,因为圆也算由弧构成,所以画圆也可能用到它。


HTML5-1.png

 


写个程序来画圆


注意我们画图的方式是这样的,beginPath。然后在设置完路径之后,closePath


HTML5-3.png


最后才是正式绘制(填充)之前设置的路径。那我们现在来看这个arc是怎么用的?


这里面有几个参数


HTML5-4.png


1) 第一个是中心坐标的x坐标,因为你画一个弧线,这是圆上面的一个弧。

2) 第二个是中心坐标的y坐标。X和y共同构成一个弧的中心坐标。(就是圆心的这个坐标)

3) 第三个r是指定这个圆的半径是多少。

4) 第四个sAngle是指开始的角度。

5) 第五个eAngele是终止角度。

6) 最后一个,counterdockwise是否顺时针和逆时针。如果是false的话,顺时针;如果是true的话,逆时针。


分别使用这些参数


1) 圆心,我们分别放到100*100的位置。

2) 半径设置为50
ctx.arc(100,100,50);保存看一下结果,使用火狐预览,什么都没有。


HTML5-5.png


3) 这个地方参数可能没对


HTML5-6.png


4) 我们再看一下API,只有最后一个参数是可选的,其它的参数都是必选项,所以我们参数没对


HTML5-7.png


5) 然后我们重新修改参数为:ctx.arc(100,100,50,0,2*Math.PI);运行,这样就画了一个圆。


HTML5-8.png


6) 当然这个地方也可以使用1.5,就是这样的一个结果。ctx.arc(100,100,50,0,1.5*Math.PI);


HTML5-9.png


7) 然后我们再看API,画圆的话就是2*Math.PI。这是从第0度到2*Math.PI。


HTML5-10.png


8) 注意看这张图分别列出了0度,0.5*PI度,1*PI度,1.5*PI度,2*PI度就回到了原点。你要画多大的弧就由它来决定。


HTML5-11.png



9) 我们再来一个逆时针画一下。这个地方也可以在最后再增加一个参数,给成true的话就是逆时针。ctx.arc(100,100,50,0,1.5*Math.PI,true);

效果就是这样的:


HTML5-12.png


10) 然后我们修改成false,使用顺时针画圆。这就是顺时针画圆的效果。


HTML5-13.png


11) 然后我们再把这个圆形的半径给成80。ctx.arc(100,100,80,0,1.5*Math.PI,false);然后这个图形就变大了。


HTML5-14.png


12) 然后我们把这个空心的圆填充成实心的圆试试。


function init(){

var can=document.getElementById("can");

var ctx=can.getContext("2d");

             ctx.beginPath();

             ctx.arc(100,100,80,0,1.5*Math.PI,false);

             ctx.closePath();

             ctx.lineWidth=5;

           // ctx.strokeStyle="orange";

           // ctx.stroke();

  ctx.fillStyle="#CCC";

  ctx.fill();    

}


把这个strokeStyle和stroke给注释掉,使用fillStyle和fill来进行填充。填充之后的效果是这样的,这就可以填充了,直线的话是没有办法填充的。


HTML5-15.png



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

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

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

客服热线 400-862-8862

回到顶部

闲来玩十三水规律
福彩3d胆码技巧 闲聊猜红包尾数技巧 极速快三稳赢技巧 重庆时时官网投注 快三全天稳赚计划 稳赚不赔的彩票计划 全年无错36码 后三胆组是什么意思 中福快3怎么下载 时时彩输了6万怎么回本