指定顏色
黑色是Canvas繪製的預設色彩，要換一種顏色的話，就得在實際畫之前指定顏色。
指定繪製線的顏色：
指定填滿的顏色：
來看看實際的例子：
JavaScript
JavaScript Code複製內容到剪貼簿
- onload = function() {
- draw();
- };
-
function draw() {
-
var canvas = document.getElementById('c1'
-
if ( ! canvas || ! canvas.getContext ) { ; }
var
ctx = canvas.getContext(-
'2d'
ctx.beginPath();
ctx.fillStyle =
- 'rgb(192, 80, 77)'
-
ctx.arc(70, 45, 35, 0, Math.PI*2, false); );
- ctx.fill();
ctx.beginPath();
- ctx.fillStyle = 'rgb(155, 187, 89)'
-
ctx.arc(45, 95, 35, 0, Math.PI*2, -
false); );
ctx.fill();
-
ctx.beginPath();
ctx.fillStyle =
- 'rgb(128, 100, 162)'; >
- ctx.arc(95, 95, 35, 0, Math.PI*2, false
- ); );
} -
效果如下圖：
-
指定透明度
-
和普通的CSS中一樣，我們指定顏色的時候還可以帶一個alpha值（不過用的不多，IE9之前都不支援）。看代碼：
JavaScript
JavaScript Code
複製內容到剪貼簿
- onload = 函數() {
- 較差（）；
- }；
-
函數 draw() {
-
var canvas = document.getElementById('c1');
-
if ( ! canvas || ! canvas.getContext ) { ； }
- var ctx = canvas.getContext('2d');
ctx.beginPath();
-
ctx.fillStyle =
- 'rgba(192, 80, 77, 0.7)'; //
ctx.arc(70, 45, 35, 0, Math.PI*2,
- false);
ctx.fill();
-
ctx.beginPath();
-
ctx.fillStyle =
- 'rgba(155, 187, 89, 0.7)'; //
ctx.arc(45, 95, 35, 0, Math.PI*2,
- false);
ctx.fill();
-
ctx.beginPath();
-
ctx.fillStyle =
- 'rgba(128, 100, 162, 0.7)'; //
ctx.arc(95, 95, 35, 0, Math.PI*2,
- false);
ctx.fill();
-
}
-
結果就是下面這樣：
和上面的程式碼基本上沒變化，就是把rgb(r, g, b)變成了rgba(r, g, b, a)而已，a的值也是0~1，0表示完全透明，1不透明（所以alpha的值其實是「不透明度」）。
全域透明globalAlpha
這也是很簡單的屬性，預設值為1.0，代表完全不透明，取值範圍是0.0（完全透明）~1.0。陰影設定是一樣的，如果不想針對全域設定不透明度，就得在接下來的情況前重置globalAlpha。
總結一下：基於狀態的屬性有哪些？
——globalAlpha
——全域複合操作
——筆劃樣式
——文字視覺，文字軸線
——lineCap,lineJoin,lineWidth,miterLimit
——fillStyle
——字體
——shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY
我們透過一個程式碼，來體驗一下globalAlpha的神奇之處~
JavaScript 程式碼
將內容複製到剪切板
-
- "zh">
-
- "UTF-8">
- 全局透明
-
-
-
"canvas-warp">
-
- 你的浏览器居然不支持Canvas？！赶快换一个吧！！
-
-
-
-
window.onload = 函數(){
-
var canvas = document.getElementById("
canvas.width = 800; -
canvas.height = 600; -
-
var context = canvas.getContext("2d"
context.fillStyle =
- "#FFF";
context.fillRect(0,0,800,600);
-
-
context.globalAlpha = 0.5;
-
-
- for(var 🎜>var 🎜>var
- i=0; >
var R = Math.floor(Math.random() * 25);
-
var G = Math.floor(Math.random() *;
-
var B = Math.floor(Math.random() *;
-
-
con.fillStyle = "rgb(" " ," B ")";
-
context.beginPath();
-
con.arc(Math.random() * canvas.width, Math.random() * canvas.height,m.width, Math.random()
-
context.fill();
-
}
-
}；
-
腳本>
-
