html5的畫布canvas——畫出弧線、旋轉的圖形實例代碼+效果圖
發(fā)布時間：2013-06-09 15:32:56 作者：佚名 
我要評論
我要評論在做旋轉操作之前一定要理解一句話：旋轉的是畫布的坐標系而不是圖形本身，首先認識一下畫圓的坐標：中心、起始角、結束角；接下來的就很簡單了
在做旋轉操作之前一定要理解一句話：旋轉的是畫布的坐標系而不是圖形本身，好了，理解了這一句話后，接下來的就很簡單了。
首先認識一下畫圓的坐標：
<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);/*繪制一段半圓弧線，圓心坐標是100,100；開始弧度是0.75，結束弧度是1.75，最后一個參數False = 順時針，true = 逆時針，當然，這個參數可選的*/
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();
/*將畫布順時針旋轉45度，rotate函數的參數是弧度，所以要進行轉換*/
cxt.rotate(45*Math.PI/180);
cxt.fillRect(141.1,-50,100,100);/*開始坐標為141.1，-50，寬和高都是100*/
cxt.fillStyle="#F00";
cxt.fill();
cxt.beginPath();
/*將畫布旋轉到正常的角度*/
cxt.rotate(-45*Math.PI/180);
cxt.font="60px 微軟雅黑";
cxt.strokeStyle="#f00";
cxt.strokeText("我愛html5",0,300);/*兩個參數，第一個是開始繪制文本的x軸坐標，第二個是開始繪制文本的Y坐標*/
cxt.stroke();
/*創(chuàng)建漸變*/
var grd=cxt.createLinearGradient(0,45,175,50);/*四個參數分別是漸變開始點x、y漸變結束點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);/*兩個參數，第一個是開始繪制文本的x軸坐標，第二個是開始繪制文本的Y坐標*/
cxt.stroke();
</script>
效果圖：
首先認識一下畫圓的坐標：
復制代碼
代碼如下:<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);/*繪制一段半圓弧線，圓心坐標是100,100；開始弧度是0.75，結束弧度是1.75，最后一個參數False = 順時針，true = 逆時針，當然，這個參數可選的*/
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();
/*將畫布順時針旋轉45度，rotate函數的參數是弧度，所以要進行轉換*/
cxt.rotate(45*Math.PI/180);
cxt.fillRect(141.1,-50,100,100);/*開始坐標為141.1，-50，寬和高都是100*/
cxt.fillStyle="#F00";
cxt.fill();
cxt.beginPath();
/*將畫布旋轉到正常的角度*/
cxt.rotate(-45*Math.PI/180);
cxt.font="60px 微軟雅黑";
cxt.strokeStyle="#f00";
cxt.strokeText("我愛html5",0,300);/*兩個參數，第一個是開始繪制文本的x軸坐標，第二個是開始繪制文本的Y坐標*/
cxt.stroke();
/*創(chuàng)建漸變*/
var grd=cxt.createLinearGradient(0,45,175,50);/*四個參數分別是漸變開始點x、y漸變結束點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);/*兩個參數，第一個是開始繪制文本的x軸坐標，第二個是開始繪制文本的Y坐標*/
cxt.stroke();
</script>
效果圖：
相關文章
- 這篇文章主要介紹了調用HTML5的Canvas API繪制圖形的快速入門指南,Canvas繪圖是HTML5入門學習中的基礎知識,需要的朋友可以參考下2016-06-17
- 這篇文章主要介紹了HTML5 Canvas控制圖形矩陣變換的方法,重點講解了利用transform()方法來控制CSS像素坐標的用法,非常給力,需要的朋友可以參考下2016-03-24
實例講解利用HTML5 Canvas API操作圖形旋轉的方法
這篇文章主要介紹了利用HTML5 Canvas API操作圖形旋轉的方法的實例講解,包括圖片自身的中心坐標位置旋轉以及圍繞某個點的旋轉例子,需要的朋友可以參考下2016-03-22HTML5 Canvas 繪圖——使用 Canvas 繪制圖形圖文教程 使用html5 canva
本文通過八種示例給大家分享了html5 canvas繪圖，需要的朋友一起來學習吧2015-08-31- 在html5中我覺得最重要的就是引入了Canvas，使得我們可以在web中繪制各種圖形,而Canvas為基于像素的繪圖。Canvas是一個相當于畫板的html節(jié)點，我們必須以js操作繪圖2012-12-26
這篇文章主要介紹了H5最強接口之canvas實現動態(tài)圖形功能,需要的朋友可以參考下2019-05-31
