利用HTML5 Canvas API繪製矩形的超級攻略_html5教學技巧

使用closePath()閉合圖形
首先我們用最普通的方法繪製一個長方形。

JavaScript Code複製內容到剪貼簿

1. html>;   
2. "en">   
3.   
4.      "UTF-8">;   
5.     標題>   
6. 頭>   
7.   
8. html>;   
9. "zh">   
10.   
11.      "UTF-8">;   
12.        
13. 頭>   
14.   
15. "canvas-warp">   
16.     「畫布」 style=「邊框：1 像素實心#aa；像素自動;“>   
17.         你的瀏覽器居然不支援Canvas？ ！趕緊換一個吧！ ！   
18.        

  

  

  

    window.onload = 函數(){   

        var canvas = document.getElementById(">        canvas.width = 800;   

        canvas.height = 600;   

        

var

 context = canvas.getContext(>            context.beginPath();   

        context.moveTo(150,50);   

        context.lineTo(650,50);   

        context.lineTo(650,550);   

        context.lineTo(150,550);   

        context.lineTo(150,50);     

//庫存最後成交使成交圖

//庫存最後成交使成交圖

//庫存最後成交使成交圖         context.lineWidth = 5;   

        context.tripStyle = 

"黑色"

;   ;   

;   

;         context.lines();   

  

    }   

腳本>