HTML5畫布(基礎篇11-10)

標籤：style   blog   http   io   color   ar   java   sp   strong   

 1 <script type="text/javascript"> 2     $(function(){ 3         var s = $("#myCanvas")[0]; 4         var canvas = s.getContext("2d"); 5         //畫直線 6         canvas.strokeStyle = "#FF0000"; 7         canvas.moveTo(100,100); 8         canvas.lineTo(300,400); 9         canvas.stroke();10         canvas.beginPath();11         canvas.moveTo(100,100);12         canvas.lineTo(400,300);13         canvas.stroke();14     //2、畫矩形15         var c = s.getContext("2d");16         //填充顏色17         c.fillStyle="blue";18         c.beginPath();19         //方式一（填充）20         c.fillRect(10,10,30,30);21         c.beginPath();22         //方式二（填充）23         c.rect(300,300,100,100);24         c.fill();25         c.beginPath();26         //線條顏色27         c.strokeStyle="yellow";28         c.strokeRect(50,50,30,30);29     //3、畫圓30         c.beginPath();31         //線條寬度32         c.lineWidth = 3;33         //線條顏色34         c.strokeStyle="black";35         // 參數：  x,y,r,開始弧度,結束弧度,順逆時針36         c.arc(200,200,30,0,360*Math.PI/180,false);37         //空心元38         c.stroke();39         //實心圓40         c.fill();41     //4、html5沒有提供畫圓角矩形API 但是通過arcTo方法可以實現這個效果42         c.beginPath();43         c.moveTo(200,200);44         c.lineTo(250,200);45         c.arcTo(300,200,300,250,30);46         c.lineTo(300,300);47         c.stroke();48         49     });50 </script>

對於畫圓角矩形而言:arcTo()的5個參數分別代表 A點的座標 B的座標 以及半徑

HTML5畫布(基礎篇11-10)