創(chuàng)建陰影效果需要操作以下4個(gè)屬性：
context.shadowColor：陰影顏色。context.shadowOffsetX：陰影x軸位移。正值向右，負(fù)值向左。context.shadowOffsetY：陰影y軸位移。正值向下，負(fù)值向上。context.shadowBlur：陰影模糊濾鏡。數(shù)據(jù)越大，擴(kuò)散程度越大。這四個(gè)屬性只要設(shè)置了第一個(gè)和剩下三個(gè)中的任意一個(gè)就有陰影效果。不過通常情況下，四個(gè)屬性都要設(shè)置。
例如，創(chuàng)建一個(gè)向右下方位移各5px的紅色陰影，模糊2px，可以這樣寫。
context.shadowColor = "red";
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur= 2;需要注意的是，這里的陰影同其他屬性設(shè)置一樣，都是基于狀態(tài)的設(shè)置。因此，如果只想為某一個(gè)對(duì)象應(yīng)用陰影而不是全局陰影，需要在下次繪制前重置陰影的這四個(gè)屬性。
下面的例子摘抄自《HTML5 Canvas開發(fā)詳解》第二版，案例名為 textArranger，是一個(gè)交互的網(wǎng)頁。結(jié)合了上兩節(jié)所說的 文本API 和本節(jié)的陰影屬性。大家可以自己打開鏈接嘗試一下，看看每個(gè)屬性的效果是什么。本例代碼過長(zhǎng)，在此不貼。
運(yùn)行結(jié)果：
globalAlpha這個(gè)也是很簡(jiǎn)單的一個(gè)屬性，默認(rèn)值為1.0，代表完全不透明，取值范圍是0.0（完全透明）~1.0。這個(gè)屬性與陰影設(shè)置是一樣的，如果不想針對(duì)全局設(shè)置不透明度，就得在下次繪制前重置globalAlpha。
總結(jié)一下：基于狀態(tài)的屬性有哪些？
——
globalAlpha——
globalCompositeOpeartion——
strokeStyle——
textAlign,textBaseline——
lineCap,lineJoin,lineWidth,miterLimit——
fillStyle——
font——
shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY
我們通過一個(gè)代碼，來體驗(yàn)一下globalAlpha的神奇之處~
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>全局透明</title>
<style>
body { background: url("./images/bg3.jpg") repeat; }
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
</style>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas">
你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧??！
</canvas>
</div>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
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 i=0; i<=50; i++){
var R = Math.floor(Math.random() * 255);
var G = Math.floor(Math.random() * 255);
var B = Math.floor(Math.random() * 255);
context.fillStyle = "rgb(" + R + "," + G + "," + B + ")";
context.beginPath();
context.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 100, 0, Math.PI * 2);
context.fill();
}
};
</script>
</body>
</html>運(yùn)行結(jié)果：
是不是非常的酷？終于有點(diǎn)藝術(shù)家的范兒了吧。
globalCompositeOperation兩個(gè)圖像重合的時(shí)候，就涉及到了對(duì)這兩個(gè)圖像的合成處理。globalCompositeOperation屬性設(shè)置或返回如何將一個(gè)源（新的）圖像繪制到目標(biāo)（已有）的圖像上。
源圖像 = 您打算放置到畫布上的繪圖。
目標(biāo)圖像 = 您已經(jīng)放置在畫布上的繪圖。
| 值 | 描述 |
|---|---|
| source-over | 默認(rèn)。在目標(biāo)圖像上顯示源圖像。 |
| source-atop | 在目標(biāo)圖像頂部顯示源圖像。源圖像位于目標(biāo)圖像之外的部分是不可見的。 |
| source-in | 在目標(biāo)圖像中顯示源圖像。只有目標(biāo)圖像內(nèi)的源圖像部分會(huì)顯示，目標(biāo)圖像是透明的。 |
| source-out | 在目標(biāo)圖像之外顯示源圖像。只會(huì)顯示目標(biāo)圖像之外源圖像部分，目標(biāo)圖像是透明的。 |
| destination-over | 在源圖像上方顯示目標(biāo)圖像。 |
| destination-atop | 在源圖像頂部顯示目標(biāo)圖像。源圖像之外的目標(biāo)圖像部分不會(huì)被顯示。 |
| destination-in | 在源圖像中顯示目標(biāo)圖像。只有源圖像內(nèi)的目標(biāo)圖像部分會(huì)被顯示，源圖像是透明的。 |
| destination-out | 在源圖像外顯示目標(biāo)圖像。只有源圖像外的目標(biāo)圖像部分會(huì)被顯示，源圖像是透明的。 |
| lighter | 顯示源圖像 + 目標(biāo)圖像。 |
| copy | 顯示源圖像。忽略目標(biāo)圖像。 |
| xor | 使用異或操作對(duì)源圖像與目標(biāo)圖像進(jìn)行組合。 |
下面我用一段代碼來說明一下這些值的意義。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>圖像合成</title>
<style>
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
</style>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas">
你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧?。? </canvas>
</div>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.globalCompositeOperation = "source-out";
context.globalAlpha = 0.5;
for(var i=0; i<=50; i++){
var R = Math.floor(Math.random() * 255);
var G = Math.floor(Math.random() * 255);
var B = Math.floor(Math.random() * 255);
context.fillStyle = "rgb(" + R + "," + G + "," + B + ")";
context.beginPath();
context.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 100, 0, Math.PI * 2);
context.fill();
}
};
</script>
</body>
</html>運(yùn)行結(jié)果：
我這個(gè)代碼相對(duì)比較簡(jiǎn)單，這里推薦一下laijieyao的專欄——【HTML5】Canvas之globalCompositeOperation屬性詳解，這篇博客里面介紹了該屬性的11值的不同效果，大家可以看一下有一個(gè)直觀的感受。
這里的代碼和上面的一樣，但是用到了圖像合成，所以把背景和空白矩形去掉了，不然的話所有的圖像都是合成圖像，因?yàn)樗麄兌际墙⒃谀莻€(gè)空白矩形之上的。雖然只加了context.globalCompositeOperation = "source-out";一句而已，其他的圓都不見了，有時(shí)候只會(huì)顯示1~2個(gè)圓。因?yàn)閟ource-out就是圖像合成處理時(shí)，保留沒有被疊加的圖像。因此可以推出，在隨機(jī)生成的50個(gè)圓中，有49個(gè)都重疊了。
還有其他的屬性，童鞋們私下也可以自己嘗試一下，都能帶來不一樣的神奇效果。
這一小節(jié)介紹了陰影、透明與圖像合成，大家消化一下，建議其他屬性值都自己嘗試一下加深理解。我們繼續(xù)向著終點(diǎn)前進(jìn)！~
掃碼關(guān)注鍍金池微信號(hào)
手機(jī)訂課，優(yōu)惠多多