標籤：style class blog code java http
卿篤軍
原文地址：http://blog.csdn.net/qingdujun/article/details/33341413
一、自訂畫筆樣式
如果想為形狀圖上顏色，需要使用以下兩個重要的屬性。
二、繪製具有顏色和透明度的矩形
<!DOCTYPE html><html><head><meta http-equiv="Content-type" content="text/html; charset = utf-8"><title>HTML5</title><script type="text/javascript" charset = "utf-8">//這個函數將在頁面完全載入後調用function pageLoaded(){//擷取canvas對象的引用,注意tCanvas名字必須和下面body裡面的id相同var canvas = document.getElementById('tCanvas');//擷取該canvas的2D繪圖環境var context = canvas.getContext('2d');//繪製代碼將出現在這裡//設定填充顏色為紅色context.fillStyle = "red";//畫一個紅色的實心矩形context.fillRect(50,50,100,40);//設定邊線顏色為綠色context.fillStyle = "green";//畫一個綠色空心矩形context.strokeRect(120,100,100,35);//使用rgb()設定填充顏色為藍色context.fillStyle = "rgb(0,0,255)";//畫一個藍色的實心矩形context.fillRect(80,230,100,40);//設定填充色為黑色且alpha值(透明度)為0.2context.fillStyle = "rgba(0,0,0,0.2)";//畫一個透明的黑色實心矩形context.fillRect(300,180,100,50);}</script></head><body onload="pageLoaded();"><canvas width = "500" height = "300" id = "tCanvas" style = "border:black 1px solid;"> <!--如果瀏覽器不支援則顯示如下字型-->提示：你的瀏覽器不支援<canvas>標籤</canvas></body></html>
三、繪製效果
參考文獻：(印)香卡(Shankar,A.R.)(作者).謝光磊(譯者).HTML5遊戲開發進階指南[M].北京：電子工業出版社，2013.8-9.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
