這篇文章主要介紹如何使用html5畫出弧線、旋轉(zhuǎn)的圖形,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴,公司提供的服務(wù)項目有:域名注冊、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、周口網(wǎng)站維護、網(wǎng)站推廣。
首先認識一下畫圓的坐標(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;開始弧度是0.75,結(jié)束弧度是1.75,最后一個參數(shù)False = 順時針,true = 逆時針,當(dāng)然,這個參數(shù)可選的*/
cxt.fillStyle="#F00";/*選擇使用的顏色*/
cxt.fill();/*真正將圖形畫在畫布上的一步,畫第一個半圓*/
/*同理繪制第二個半圓*/
cxt.beginPath();
cxt.arc(170,100,50,Math.PI*1.25,Math.PI*0.25,false);
cxt.fillStyle="#F00";
cxt.fill();/*將繪制的圖形畫在畫布上*/
cxt.beginPath();
/*將畫布順時針旋轉(zhuǎn)45度,rotate函數(shù)的參數(shù)是弧度,所以要進行轉(zhuǎn)換*/
cxt.rotate(45*Math.PI/180);
cxt.fillRect(141.1,-50,100,100);/*開始坐標(biāo)為141.1,-50,寬和高都是100*/
cxt.fillStyle="#F00";
cxt.fill();
cxt.beginPath();
/*將畫布旋轉(zhuǎn)到正常的角度*/
cxt.rotate(-45*Math.PI/180);
cxt.font="60px 微軟雅黑";
cxt.strokeStyle="#f00";
cxt.strokeText("我愛html5",0,300);/*兩個參數(shù),第一個是開始繪制文本的x軸坐標(biāo),第二個是開始繪制文本的Y坐標(biāo)*/
cxt.stroke();
/*創(chuàng)建漸變*/
var grd=cxt.createLinearGradient(0,45,175,50);/*四個參數(shù)分別是漸變開始點x、y漸變結(jié)束點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("我愛canvas",0,400);/*兩個參數(shù),第一個是開始繪制文本的x軸坐標(biāo),第二個是開始繪制文本的Y坐標(biāo)*/
cxt.stroke();
</script>
以上是“如何使用html5畫出弧線、旋轉(zhuǎn)的圖形”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
文章名稱:如何使用html5畫出弧線、旋轉(zhuǎn)的圖形
當(dāng)前地址:http://muchs.cn/article38/gceopp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站設(shè)計、App設(shè)計、Google、電子商務(wù)、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)