這篇文章主要介紹如何使用html5畫(huà)出弧線、旋轉(zhuǎn)的圖形，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、雅安服務(wù)器托管、營(yíng)銷軟件、網(wǎng)站建設(shè)、周口網(wǎng)站維護(hù)、網(wǎng)站推廣。

首先認(rèn)識(shí)一下畫(huà)圓的坐標(biāo)：

代碼如下:

<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>

以上是“如何使用html5畫(huà)出弧線、旋轉(zhuǎn)的圖形”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：如何使用html5畫(huà)出弧線、旋轉(zhuǎn)的圖形
當(dāng)前地址：http://jinyejixie.com/article38/gceopp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、App設(shè)計(jì)、Google、電子商務(wù)、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)