1. <script type="text/javascript">        var canvas = document.getElementById("canvas");   
2.     var context = canvas.getContext("2d");      
3.     //使用rect方法        context.rect(10,10,190,190);   
4.     context.lineWidth = 2;        context.fillStyle = "#3EE4CB";   
5.     context.strokeStyle = "#F5270B";        context.fill();   
6.     context.stroke();      
7.     //使用fillRect方法        context.fillStyle = "#1424DE";   
8.     context.fillRect(210,10,190,190);      
9.     //使用strokeRect方法        context.strokeStyle = "#F5270B";   
10.     context.strokeRect(410,10,190,190);      
11.     //同時使用strokeRect方法和fillRect方法        context.fillStyle = "#1424DE";   
12.     context.strokeStyle = "#F5270B";        context.strokeRect(610,10,190,190);   
13.     context.fillRect(610,10,190,190);    </script>   
14.   

這里需要說明兩點：第一點就是stroke()和fill()繪制的前后順序，如果fill()后面繪制，那么當stroke邊框較大時，會明顯的把stroke()繪制出的邊框遮住一半；第二點：設置fillStyle或strokeStyle屬性時，可以通過“rgba(255,0,0,0.2)”的設置方式來設置，這個設置的最后一個參數是透明度。