HTML5CANVAS绘制阴影和填充模式.docx

HTML5 CANVAS：绘制阴影和填充模式明月H5课程绘制阴影　我们可以在/HTML5?canvas上绘制出图形或文字的阴影效果。canvas的阴影效果非常简单，通过一些简单的设置，就可以自动在图片或文字下面生成相应的阴影。下面是一个简单的例子：在canvas中，图形的阴影由2D上下文的4个属性来控制：　shadowOffsetX　shadowOffsetY　shadowBlur　shadowColor　shadowOffsetX和shadowOffsetY属性阴影和图形之间的距离。正数值表示阴影绘制在图形的右边(X轴方向)，或图形的下方(Y轴方向)。而负数值表示阴影绘制在图形的左边(X轴方向)，或图形的上方(Y轴方向)。它们的默认值都是0。　shadowBlur属性用于设置阴影的模糊效果。数值越大，阴影越模糊。数值越小，用于越清晰。它的值是一个浮点数，0表示阴影不模糊。　shadowColor表示阴影的颜色。　上面例子的实现代码如下：var canvas??= document.getElementById(ex1);var context = canvas.getContext(2d);context.shadowOffsetX = 10;context.shadowOffsetY = 10;context.shadowBlur? ? = 4;context.shadowColor? ?= #666666;??//or use rgb(red, green, blue)context.fillStyle = #000000;context.fillRect(10,10, 50, 50);context.fillStyle = #000066;context.font = 30px Arial;context.fillText(HTML5 Canvas Shadow, 10,120);复制代码　填充模式　填充模式是指在canvas中使用某张图片作为一种模式来填充图形。我们可以通过createPattern()方法来创建一种填充模式。它的语法为：createPattern(image, type)。　参数image可以是一个HTML图片元素，另一个canvas或一个元素等。　参数type表示如何使用图片来创建特定的模式。它的取值可以是：　repeat：在水平和垂直方向上重复图片。　repeat-x：只在水平方向上重复图片。　repeat-y：只在垂直方向上重复图片。　no-repeat：不重复图片，只显示一次。　下面是一个使用填充模式的简单例子：var ctx = document.getElementById(canvas).getContext(2d);// create new image object to use as patternvar img = new Image();img.src = Canvas_createpattern.png;img.onload = function(){// create patternvar ptrn = ctx.createPattern(img,repeat);ctx.fillStyle = ptrn;ctx.fillRect(0,0,150,150)复制代码　我们在模式中使用的图片如下：　上面代码的返回结果如下：