html 5 canvas畫布整理

 

 

1. 建立canvas畫布
<canvas id="myCanvas" width="800" height="800" ></canvas>
注意：（1）width、height，這兩個屬性定義了canvas元素寬和高，從而相應的定義了2D渲染上下文的尺寸。
　　　（2）2D渲染上下文的尺寸默認值：寬300像素、高150像素。
2. 座標
左上角爲原點（0,0）
右移：x座標增長
下移：y座標增長
3. 2D渲染上下文（真正繪製圖形的地方）

<script type= "text/javascript" >

     var  canvas = document.getElementById( 'myCanvas' );    // 獲取canvas的ID

     var  context =canvas.getContext( "2d" );

</script>

第二部分:矩形
1.繪製矩形
方法：context.fillRect(x,y,width,height);
2.繪製描邊矩形
方法：strokeRect(x,y,width,height)
實例：

<script>

     function  draw1(id){

         var  canvas = document.getElementById(id);  

         var  context =canvas.getContext( "2d" );

         context.fillRect(0,0,100,100);   // 繪製一個矩形，默認顏色爲黑色

         context.strokeRect(120, 0, 100, 100);      // 繪製描邊矩形

     }draw1( 'myCanvas' );

</script>

第三部分:線條
線條（路徑）繪製步驟：
1）beginPath()      準備
2）moveTo()      繪製路徑的原點座標(x,y)
3) lineTo()         設置線條的終點座標(x,y)
4) closePath()      完成路徑的繪製
5）stroke()       繪製輪廓，顯示路徑 
實例：

<script>

     function  draw1(id){

         var  canvas = document.getElementById(id);  

         var  context =canvas.getContext( "2d" );

         context.beginPath();

         context.moveTo(40,40);

         context.lineTo(140,40);

         context.closePath();

         context.stroke();

     }draw1( 'myCanvas' );

</script>　

第四部分:圓形
canvas 經過繪製圓弧並將其首尾相連，達到繪製圓形的目的。
建立圓弧的方法：context.arc(x, y, radius, starAngle,endAngle, anticlockwise)
對應參數：
1）圓弧原點的（x,y）座標值,也就是例子中的圓心
2）圓弧半徑
3）開始角度
4）結束角度
5）布爾值（順時針false,逆時針true） 
注意： canvas中的圓是以弧度而不是角度爲單位的。
360度（一個完整的圓）是2π（PI的2倍）弧度
實例：

<script type= "text/javascript" >

     function  draw1(id){

         var  canvas = document.getElementById(id);  

         var  context =canvas.getContext( "2d" );

         context.beginPath();

         context.arc(230,90,50,0,Math.PI*2, false );  // 繪製圓形

         context.closePath();

         context.fill();  // 填充路徑

     }draw1( 'myCanvas' );

</script>

 

第五部分：樣式
1. fillStyle ：給矩形填充顏色
2. strokeStyle：給描邊和線條添加顏色
3. lineWidth：修改線寬（線寬默認爲1），這個屬性也會影響圖形

經過設置2D渲染上下文的fillStyle屬性，就可以修改形狀和路徑的填充顏色，以下，繪製一個紅色的正方形

<script type= "text/javascript" >

     function  draw1(id){

         var  canvas = document.getElementById(id);  

         var  context =canvas.getContext( "2d" );

         context.fillStyle =  "red" ;     // 給圖形填充紅色

         context.fillRect(0,0,50,50);      // 一個紅色的正方形

         context.fillRect(70,70,80,80);     // 又一個紅色正方形

 

         context.fillStyle =  "blue" ;       // 給圖形填充藍色

         context.fillRect(70,70,80,80);      // 一個藍色正方形

 

         context.strokeStyle =  "yellow" ;       // 給圖形填充黃色描邊

         context.strokeRect(170,170,100,100);     // 一個黃色描邊的正方形

 

         context.strokeStyle =  "blue" ;    // 繪製藍色線條

         context.beginPath();      // 繪製線條開始

         context.moveTo(290,290);

         context.lineTo(350,350);

         context.closePath();

         context.stroke();     // 繪製線條結束

 

         context.lineWidth = 5;    // 加粗線條

         context.strokeStyle =  "blue" ;      // 繪製藍色線條

         context.beginPath();

         context.moveTo(320,340);

         context.lineTo(370,390);

         context.closePath();

         context.stroke();      // 加粗的線條繪製完成

         context.strokeRect(380,380,50,50)      // 受影響的圖形，描邊已加粗

     }draw1( 'myCanvas' );

</script>

　

第六部分：繪製文本
canvas繪製文本：
(1) canvas中的文本以圖片形式繪製，不可用普通文字同樣用鼠標指針選取
(2) 文字繪製後不可編輯，除非先擦除文字，從新繪製
注：一般是使用html來處理文本，使用canvas來處理像素和圖形
1.繪製文本：fillText 
參數：
準備繪製的文本，文本原點（左下角）的（x,y）座標值
默認：10px sans-serif
2.修改文字屬性：font
3.描邊文本：strokeText

<script type= "text/javascript" >

     function  draw1(id){

         var  canvas = document.getElementById(id);  

         var  context =canvas.getContext( "2d" );

         var  text =  "hello world!" ;

         context.font= "30px serif"  // 把文本大小設置爲30px

         context.fillText(text,40,40);  // 繪製文本

         context.strokeText(text,40,80);  // 描邊文筆塔你

     }draw1( 'myCanvas' );

</script>