3.2　图形的渲染

Canvas提供了很多对颜色进行操作的API，可实现渐变、反色等效果。这一节中将举例说明如何实现这些效果。
3.2.1　绘制颜色渐变效果的图形
颜色的渐变分为线性渐变和径向渐变，下面分别进行说明。
1 . 线性渐变
使用createLinearGradient函数和addColorStop函数可以实现线性渐变功能。
createLinearGradient函数的原型如下：

createLinearGradient(x1,y1,x2,y2)

其中的4个参数分别是渐变的出发点坐标(x1，y1)与终点坐标(x2，y2)。
addColorStop函数的原型如下：

addColorStop (position,color)

其中，position 参数必须是一个 0.0 到 1.0 之间的数值，表示渐变中颜色地点的相对地位；color参数表示渐变的颜色。
它的绘制如代码清单3-15所示。
代码清单　3-15

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0.2,"#00ff00");
grd.addColorStop(0.8,"#ff0000");
ctx.fillStyle=grd;
ctx.fillRect(0,0,200,100);
</script>

绘制效果如图3-20所示。

2 . 径向渐变
使用createRadialGradient函数和addColorStop函数可以实现径向渐变功能。
createRadialGradient函数的原型如下：

createRadialGradient (x0,y0,r0,x1,y1,r1)

其中，参数x0、y0为开始圆的圆心坐标，r0为开始圆的直径；x1、y1为结束圆的圆心坐标，r1为结束圆的直径。
createRadialGradient函数的使用方法如代码清单3-16所示。
代码清单　3-16

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var grd=ctx.createRadialGradient(100,100,10,100,100,50);
grd.addColorStop(0,"#00ff00");
grd.addColorStop(1,"#ff0000");
ctx.fillStyle=grd;
ctx.fillRect(0,0,200,200);
</script>

运行效果如图3-21所示。

3.2.2　颜色合成之globalCompositeOperation属性
globalCompositeOperation 属性说明了绘制到画布上的颜色是如何与画布上已有的颜色组合起来的。下面列出了其中可能要设置的值以及它们的含义。这些值中的source一词指的是将要绘制到画布上的颜色，而destination指的是画布上已经存在的颜色，其默认值是source-over。
copy：只绘制新图形，删除其他所有内容。
darker：在图形重叠的地方，其颜色由两个颜色值相减后决定。
destination-atop：画布上已有的内容只会在它和新图形重叠的地方保留。新图形绘制于内容之后。
destination-in：在新图形及画布上已有图形重叠的地方，画布上已有内容都保留。所有其他内容均为透明的。
destination-out：在画布上已有内容和新图形不重叠的地方，已有内容保留。所有其他内容均为透明的。
destination-over：新图形绘制于画布上已有内容的后面。
lighter：在图形重叠的地方，其颜色由两种颜色值的加值来决定。
source-atop：只有在新图形和画布上已有内容重叠的地方才绘制新图形。
source-in：在新图形以及画布上已有内容重叠的地方才绘制新图形。所有其他内容均为透明的。
ource-out：只有在和画布上已有图形不重叠的地方才绘制新图形。
source-over：新图形绘制于画布上已有图形的顶部。这是默认的设置。
xor：在重叠和正常绘制的其他地方，图形都成为透明的。
为了方便大家理解，我们来看看相关代码，如代码清单3-17所示。
代码清单　3-17

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.fillStyle="#00ff00";
ctx.fillRect(10,10,50,50);
ctx.globalCompositeOperation="source-over";
ctx.beginPath();
ctx.fillStyle="#ff0000";
ctx.arc(50,50,30,0,2*Math.PI);
ctx.fill();
</script>

运行效果如图3-22所示。
代码清单3-14中设置了globalCompositeOperation的属性为source-over，表示新图形绘制于已有图形的顶部。
其他属性实现的效果如图3-23至图3-33所示。

以上就是globalCompositeOperation所有属性的效果图。
3.2.3　颜色反转
所谓颜色反转，就是对图形的每个像素进行颜色取反，如代码清单3-18所示。
代码清单　3-18

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var image = new Image();    
image.src = "face.jpg";  
image.onload = function(){    
    ctx.drawImage(image,0,0);  
    
    var imgdata = ctx.getImageData(0,0,250,250); 
    var pixels = imgdata.data; 
    // 遍历每个像素并对 RGB 值进行取反
    for (var i=0, n=pixels.length; i<n; i+= 4){ 
    pixels[i] = 255-pixels[i]; 
    pixels[i+1] = 255-pixels[i+1]; 
    pixels[i+2] = 255-pixels[i+2]; 
    } 
    // 在指定位置进行像素重绘
    ctx.putImageData(imgdata, 250, 0); 
};  
</script>

运行效果如图3-34所示。

3.2.4　灰度控制
在游戏的制作过程中，有时候需要将图片变为灰色，其做法与3.2.3节所介绍的内容相似。首先对图形的每个像素进行灰度计算，如代码清单3-19所示。
代码清单　3-19

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var image = new Image();    
image.src = "face.jpg";  
image.onload = function(){    
    ctx.drawImage(image,0,0);  
    
    var imgdata = ctx.getImageData(0,0,250,250); 
    var pixels = imgdata.data; 
     // 遍历每个像素并对 RGB 值进行取反
    for (var i=0, n=pixels.length; i<n; i+= 4){ 
        var grayscale = pixels[i] * .3 + 
            pixels[i+1] * .59 + pixels[i+2] * .11;
        pixels[i  ] = grayscale;     // red
         pixels[i+1] = grayscale;     // green
         pixels[i+2] = grayscale;     // blue
    } 
    // 在指定位置进行像素重绘
    ctx.putImageData(imgdata, 250, 0); 
};  
</script>

运行效果如图3-35所示。

3.2.5　阴影效果
Canvas API 中包含了自动为你所绘制的任何图形添加下拉阴影的属性。阴影的颜色可用 shadowColor 属性来指定，并且可以通过 shadowOffsetX 和 shadowOffsetY 属性来改变。另外，应用到阴影边缘的羽化量也可以使用 shadowBlur 属性来设置。代码清单3-20给图片加上了红色阴影。
代码清单　3-20

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.shadowColor="#ff0000";
ctx.shadowBlur=10;
ctx.shadowOffsetX=20; 
ctx.shadowOffsetY=30;
     
var image = new Image();    
image.src = "face.jpg";  
image.onload = function(){    
    ctx.drawImage(image,0,0);  
    
};  
</script>

运行效果如图3-36所示。
在代码清单3-20中，下列代码表示设定阴影的颜色为红色。

ctx.shadowColor="#ff0000";

下列代码指定羽化阴影的程度为10。

ctx.shadowBlur=10;

下列代码指定阴影的水平偏移量和垂直偏移量。

ctx.shadowOffsetX=20; 
ctx.shadowOffsetY=30;

以上几个属性中从字面上不太容易理解的是羽化程度shadowBlur。代码清单3-21将阴影的羽化程度设为了100，这样大家就可以看到区别了。
代码清单　3-21

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.shadowColor="#ff0000";
ctx.shadowBlur=100;
ctx.shadowOffsetX=20; 
ctx.shadowOffsetY=30;
     
var image = new Image();    
image.src = "face.jpg";  
image.onload = function(){    
     ctx.drawImage(image,0,0);  
    
};  
</script>

运行效果如图3-37所示。