在做旋轉操作之前一定要理解一句話：旋轉的是畫布的座標係而不是圖形本身，好了，理解了這一句話後，接下來的就很簡單了。 首先認識一下畫圓的坐標： 複製代碼代碼如下: <br />var cxt=document.getElementById('demo').getContext("2d"); <br />cxt.beginPath(); <br /> cxt.arc(100,100,50,Math.PI*0.75,Math.PI*1.75,false);/*繪製一段半圓弧線，圓心座標是100,100；開始弧度是0.75，結束弧度是1.75，最後一個參數False = 順時針，true = 逆時針，當然，這個參數可選的*/ <br />cxt.fillStyle="#F00";/*選擇使用的顏色*/ <br />cxt.fill();/*真正將圖形畫在畫布上的一步，畫第一個半圓*/ <br />/*同理繪製第二個半圓*/ <br />cxt.beginPath(); <br />cxt.arc(170,100,50, Math.PI*1.25,Math.PI*0.25,false); <br />cxt.fillStyle="#F00"; <br />cxt.fill();/*將繪製的圖形畫在畫布上*/ <br />cxt.beginPath(); <br />/*將畫布順時針旋轉45度，rotate函數的參數是弧度，所以要進行轉換*/ <br />cxt.rotate(45*Math.PI/180); <br />cxt.fillRect(141.1,-50,100,100);/*開始座標為141.1，-50，寬和高都是100*/ <br />cxt.fillStyle="#F00"; <br />cx.fill() ; <br />cxt.beginPath(); <br />/*將畫布旋轉到正常的角度*/ <br />cxt.rotate(-45*Math.PI/180); <br />cxt.font="60px微軟雅黑"; <br />cxt.strokeStyle="#f00"; <br />cxt.strokeText("我愛html5",0,300);/*兩個參數，第一個是開始繪製文字的x軸座標，第二個是開始繪製文字的Y座標*/ <br />cxt.stroke(); <br />/*建立漸變*/ <br />var grd=cxt.createLinearGradient(0,45,175,50);/*四個參數分別為漸變開始點x、y漸變結束點x、y*/ <br />grd.addColorStop(0,"#FF0000"); <br />grd.addColorStop(0.25,"#FFFF00"); <br />grd.addColorStop(0.5,"#00FF00"); <br />grd.addColorStop(0.75,"#00FFFF"); <br />grd.addColorStop(1,"#FFFF00"); <br />grd.addColorStop(1,"#FFFF00"); <🎜. =grd; <br />cxt.strokeText("我愛canvas",0,400);/*兩個參數，第一個是開始繪製文本的x軸座標，第二個是開始繪製文本的Y坐標*/ <br />cxt.stroke(); <br /> 效果圖：
