Canvas 全局阴影与图像合成 · Canvas动画教程

Cp9 全局阴影与图像合成

阴影效果

创建阴影效果需要 *** 作以下4个属性：

context.shadowColor：阴影颜色。

context.shadowOffsetX：阴影x轴位移。正值向右，负值向左。

context.shadowOffsetY：阴影y轴位移。正值向下，负值向上。

context.shadowBlur：阴影模糊滤镜。数据越大，扩散程度越大。

这四个属性只要设置了第一个和剩下三个中的任意一个就有阴影效果。不过通常情况下，四个属性都要设置。

例如，创建一个向右下方位移各5px的红色阴影，模糊2px，可以这样写。

context.shadowColor = "red";
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur= 2;

需要注意的是，这里的阴影同其他属性设置一样，都是基于状态的设置。因此，如果只想为某一个对象应用阴影而不是全局阴影，需要在下次绘制前重置阴影的这四个属性。

下面的例子摘抄自《HTML5 Canvas开发详解》第二版，案例名为 textArranger，是一个交互的网页。结合了上两节所说的 文本API 和本节的阴影属性。大家可以自己打开链接尝试一下，看看每个属性的效果是什么。本例代码过长，在此不贴。

演示 19-1

运行结果：

全局透明globalAlpha

这个也是很简单的一个属性，默认值为1.0，代表完全不透明，取值范围是0.0（完全透明）~1.0。这个属性与阴影设置是一样的，如果不想针对全局设置不透明度，就得在下次绘制前重置globalAlpha。

总结一下：基于状态的属性有哪些？

——globalAlpha

——globalCompositeOpeartion

——strokeStyle

——textAlign,textbaseline

——lineCap,lineJoin,lineWidth,miterLimit

——fillStyle

——font

——shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY

我们通过一个代码，来体验一下globalAlpha的神奇之处~

    
    
    
        body { background: url("./images/bg3.jpg") repeat; }
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
    



    
        你的浏览器居然不支持Canvas？！赶快换一个吧！！
    					
										


					

						
欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/zaji/3013135.html