HTML5 Canvas进阶（二）：模式，组合，阴影，状态，变形

最新推荐文章于 2024-10-12 09:26:17 发布

有点发红

最新推荐文章于 2024-10-12 09:26:17 发布

阅读量4.2k

点赞数 2

分类专栏： HTML5 文章标签： html5 javascript 图形 image function chrome

本文链接：https://blog.csdn.net/sadfishsc/article/details/6894875

版权

HTML5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

模式

前面在介绍strokeStyle和fillStyle属性的时候曾说过它们的取值可以是CSS颜色值、渐变对象或者模式对象。在上一篇中已经介绍过渐变对象了，那么这篇的开始就介绍模式对象。

模式对象可以通过Context对象调用createPattern()方法来生成，其原型如下：

Object createPattern(image, patternType);

其中image可以是HTMLImageElement、HTMLCanvasElement或者HTMLVideoElement，是模式操纵的对象；patternType是模式的类型，取值可以是repeat（同时在x、y方向重复）、repeat-x（在x方向重复）、repeat-y（在y方向重复）、no-repeat（不重复），默认为repeat。

需要注意的是模式对象的生成和赋值过程必须写到JavaScript的function中，否则可能会失效。

示例如下：

JavaScript代码：

window.onload = function() {
         var canvas = document.getElementById("canvas"); 
         var context = canvas.getContext("2d");
        
         var img = new Image();
         img.src="http://imgsrc.baidu.com/forum/pic/item/e6b14bc2a4561b1fe4dd3b24.jpg";
        
         var pattern = context.createPattern(img, 'repeat');
         context.fillStyle= pattern;
         context.fillRect(0,0, canvas.width, canvas.height);
}

组合

默认状态下，后绘制的图形就会覆盖在先绘制的图形上。不过可以通过改变Context对象的globalCompositeOperation属性来更改图形相互组合或者覆盖的方式。目前HTML5标准中globalCompositeOperation属性共有12个值，即12种可选的组合方式，但是笔者的试验中使用的chrome 14.0浏览器只支持其中的source-over、destination-over、lighter、xor 4种方式。以下是全部12种可选的组合方式：

注：以上图例中A表示后绘制的红色圆形图案，B表示先绘制的蓝色方形图案。

阴影

Context对象拥有4个用来给图形绘制阴影的属性，分别是：

shadowBlur

阴影的模糊度，默认为0，负数值将会被忽略。

shadowColor

阴影的颜色，默认为#000000，取值可以是任意CSS颜色值。

shadowOffsetX

阴影在x方向上的偏移量，默认为0，不受坐标转换的影响。

shadowOffsetY

阴影在y方向上的偏移量，默认为0，同样不受坐标转换的影响。

在下面的示例中，通过使用lighter组合方式，把阴影从图形的后方转移到了前方：

JavaScript代码：

var canvas =document.getElementById("canvas"); 
var context =canvas.getContext("2d");
 
context.globalCompositeOperation ="lighter";
 
context.shadowBlur = 10;
context.shadowColor = "#a3a3a3";
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
 
context.fillStyle = "red";
context.fillRect(50, 50, 100, 100);