HTML5快速入門例項（三）Canvas自定義畫筆樣式
阿新 • • 發佈：2019-02-18
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Html5遊戲開發學習1-Canvas</title> </head> <body> <canvas id="canvas" width="600" height="600" style="broder:black 1px solid;"> 瀏覽器不支援HTML5 canvas </canvas> <script type="text/javascript" charset="utf-8"> //獲取canvas物件的引用 var canvas = document.getElementById('canvas'); //獲取canvas的2d繪圖環境 var context = canvas.getContext('2d'); //繪製具有顏色和透明度的矩形 context.fillStyle = "red"; //畫一個紅色的矩形 context.fillRect(310,160,100,50); //設定邊線顏色為綠色 context.strokeStyle = "green"; //畫一個綠色的空心矩形 context.strokeRect(310,240,100,50); //使用rgb設定填充顏色為紅色 context.fillStyle = "rgb(255,0,0)"; //畫一個紅色的實心矩形 context.fillRect(420,160,100,50); //設定填充顏色為綠色，並且alpha值為0.6 context.fillStyle="rgba(0,255,0,0.6)"; //畫一個半透明的綠色實心矩形 context.fillRect(450,180,100,50); </script> </body> </html>
執行效果：
