亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

html5的畫(huà)布canvas——畫(huà)出弧線、旋轉(zhuǎn)的圖形實(shí)例代碼+效果圖

  發(fā)布時(shí)間：2013-06-09 15:32:56   作者：佚名   我要評(píng)論
在做旋轉(zhuǎn)操作之前一定要理解一句話：旋轉(zhuǎn)的是畫(huà)布的坐標(biāo)系而不是圖形本身，首先認(rèn)識(shí)一下畫(huà)圓的坐標(biāo)：中心、起始角、結(jié)束角；接下來(lái)的就很簡(jiǎn)單了
在做旋轉(zhuǎn)操作之前一定要理解一句話：旋轉(zhuǎn)的是畫(huà)布的坐標(biāo)系而不是圖形本身，好了，理解了這一句話后，接下來(lái)的就很簡(jiǎn)單了。
首先認(rèn)識(shí)一下畫(huà)圓的坐標(biāo)：
 

復(fù)制代碼
代碼如下:

<script language="javascript">
var cxt=document.getElementById('demo').getContext("2d");
cxt.beginPath();
cxt.arc(100,100,50,Math.PI*0.75,Math.PI*1.75,false);/*繪制一段半圓弧線，圓心坐標(biāo)是100,100；開(kāi)始弧度是0.75，結(jié)束弧度是1.75，最后一個(gè)參數(shù)False = 順時(shí)針，true = 逆時(shí)針，當(dāng)然，這個(gè)參數(shù)可選的*/
cxt.fillStyle="#F00";/*選擇使用的顏色*/
cxt.fill();/*真正將圖形畫(huà)在畫(huà)布上的一步，畫(huà)第一個(gè)半圓*/
/*同理繪制第二個(gè)半圓*/
cxt.beginPath();
cxt.arc(170,100,50,Math.PI*1.25,Math.PI*0.25,false);
cxt.fillStyle="#F00";
cxt.fill();/*將繪制的圖形畫(huà)在畫(huà)布上*/
cxt.beginPath();
/*將畫(huà)布順時(shí)針旋轉(zhuǎn)45度，rotate函數(shù)的參數(shù)是弧度，所以要進(jìn)行轉(zhuǎn)換*/
cxt.rotate(45*Math.PI/180);
cxt.fillRect(141.1,-50,100,100);/*開(kāi)始坐標(biāo)為141.1，-50，寬和高都是100*/
cxt.fillStyle="#F00";
cxt.fill();
cxt.beginPath();
/*將畫(huà)布旋轉(zhuǎn)到正常的角度*/
cxt.rotate(-45*Math.PI/180);
cxt.font="60px 微軟雅黑";
cxt.strokeStyle="#f00";
cxt.strokeText("我愛(ài)html5",0,300);/*兩個(gè)參數(shù)，第一個(gè)是開(kāi)始繪制文本的x軸坐標(biāo)，第二個(gè)是開(kāi)始繪制文本的Y坐標(biāo)*/
cxt.stroke();
/*創(chuàng)建漸變*/
var grd=cxt.createLinearGradient(0,45,175,50);/*四個(gè)參數(shù)分別是漸變開(kāi)始點(diǎn)x、y漸變結(jié)束點(diǎn)x、y*/
grd.addColorStop(0,"#FF0000");
grd.addColorStop(0.25,"#FFFF00");
grd.addColorStop(0.5,"#00FF00");
grd.addColorStop(0.75,"#00FFFF");
grd.addColorStop(1,"#FFFF00");
cxt.strokeStyle=grd;
cxt.strokeText("我愛(ài)canvas",0,400);/*兩個(gè)參數(shù)，第一個(gè)是開(kāi)始繪制文本的x軸坐標(biāo)，第二個(gè)是開(kāi)始繪制文本的Y坐標(biāo)*/
cxt.stroke();
</script>

效果圖：

相關(guān)文章

最新評(píng)論