浅谈HTML5 canvas（二）

╰+攻爆jí腚メ 2022-10-01 04:47 266阅读 0赞

[http://blog.csdn.net/zhouziyu2011/article/details/65682406][http_blog.csdn.net_zhouziyu2011_article_details_65682406]已经介绍了canvas及2D上下文的一些应用。

下面继续介绍2D上下文的其他应用。

1、变换

通过上下文的变换，可以将处理后的图像绘制到画布上。

可以通过如下方法来变换上下文：

①　rotate(angle)：围绕圆点旋转angle弧度；

②　scale(x, y)：缩放图像，在x方向乘以x，在y方向乘以y；

③　translate(x, y)：将坐标圆点移动到(x, y)，执行该变换后，坐标(0, 0)会变为之前由(x, y)表示的点;

④　Transform(m1\_1, m1\_2, m2\_1, m2\_2, dx, dy);直接修改变换矩阵，方法是乘以如下矩阵：

m1\_1 m1\_2 dx

m2\_1 m2\_2 dy

0 0 1

⑤　setTransform(m1\_1, m1\_2, m2\_1, m2\_2, dx, dy)：将变换矩阵重置为默认状态，然后再调用transform()。

var canvas = document.getElementsByTagName("canvas")[0];  
    if (canvas.getContext) {  
    	var context = canvas.getContext("2d");  
    	// 开始路径
    	context.beginPath();
    	// 绘制外圆
    	context.arc(100, 100, 99, 0, 2 * Math.PI, false);
    	// 绘制内圆
    	context.moveTo(194, 100);
    	context.arc(100, 100, 94, 0, 2 * Math.PI, false);
    	// 变换原点
    	context.translate(100, 100);
    	// 旋转表针
    	context.rotate(1);
    	// 绘制分针
    	context.moveTo(0, 0);
    	context.lineTo(0, -85);
    	// 绘制时针
    	context.moveTo(0, 0);
    	context.lineTo(-65, 0);
    	// 描边路径
    	context.stroke();
    }

没有什么方法可以把上下文中的一切都重置回默认值，但有两个方法可以跟踪上下文的状态变化，若将来还要返回某组属性和变换的组合，可以调用save()方法，使当时的设置进入栈中存储，之后可以对上下文进行其他修改，要回到之前保存的设置时，可以调用save()方法返回一级。当然可以连续调用save()将更多设置保存到栈中，之后连续调用restore()则可以一级一级返回。

var canvas = document.getElementsByTagName("canvas")[0];  
    if (canvas.getContext) {  
    	var context = canvas.getContext("2d");  
    	context.fillStyle = "red";
    	context.save();
    	context.fillStyle = "green";
    	context.translate(100, 100);
    	context.save();
    	context.fillStyle = "blue";
    	context.fillRect(0, 0, 100, 200); // 从(100, 100)开始绘制蓝色矩形
    	context.restore();
    	context.fillRect(10, 10, 100, 200); // 从(110, 110)开始绘制绿色矩形
    	context.restore();
    	context.fillRect(0, 0, 100, 200); // 从(0, 0)开始绘制红色矩形
    }

2、绘制图像

2D上下文内置了对图像的支持，使用drawImage()可以把一幅图像绘制到画布上，该方法可以传入三种不同的参数组合：

①　HTML<img>元素，绘制图像的起点的x和y坐标

②　HTML<img>元素，绘制图像的起点的x和y坐标，绘制图像的宽度和高度

③　HTML<img>元素，源图像的x坐标，源图像的y坐标，源图像的宽度，源图像的高度，目标图像的x坐标，目标图像的y坐标，目标图像的宽度，目标图像的高度。

④　HTML<canvas>元素，绘制图像的起点的x和y坐标

⑤　HTML<canvas>元素，绘制图像的起点的x和y坐标，绘制图像的宽度和高度

⑥　HTML<canvas>元素，源图像的x坐标，源图像的y坐标，源图像的宽度，源图像的高度，目标图像的x坐标，目标图像的y坐标，目标图像的宽度，目标图像的高度。

注意：使用drawImage()方法和其他方法可以对图像进行各种基本操作，操作的结果可以通过toDataURL()方法获得，但图像不能来自其他域，若图像来自其他域，调用toDataURL()会抛出一个错误。

var img = new Image();
    img.src = "images/img4.jpg"; 
    var canvas = document.getElementsByTagName("canvas")[0];    
    if (canvas.getContext) {    
        var context = canvas.getContext("2d");    
        context.drawImage(img, 30, 30);  
        context.drawImage(img, 100, 100, 100, 100);  
        context.drawImage(img, 100, 100, 100, 100, 50, 50, 50, 50);  
    }

3、阴影

2D上下文会根据以下几个属性的值，自动为形状或路径绘制出阴影：

shadowColor：用CSS颜色格式表示的阴影颜色，默认为黑色；

shadowOffsetX：形状或路径x轴方向的阴影偏移量，默认为0；

shadowOffsetY：形状或路径y轴方向的阴影偏移量，默认为0；

shadowBlur：模糊的像素数，默认为0，即不模糊。

var canvas = document.getElementsByTagName("canvas")[0];  
    if (canvas.getContext) {  
    	var context = canvas.getContext("2d");  
    	context.shadowOffsetX = 10;
    	context.shadowOffsetY = 10;
    	context.shadowBlur = 10;
    	context.shadowColor = "grey";
    	context.fillStyle = "red";
    	context.fillRect(20, 20, 100, 100);
    	context.fillStyle = "blue";
    	context.fillRect(50, 50, 100, 100);
    }

不同浏览器对阴影的支持有所差异，IE9、Firefox4、Opera11的行为最为规范，其他浏览器都会有一些奇怪的现象，甚至根本不支持阴影。Chrome10以下版本不能正确地为描边形状应用实心阴影；Chrome及Safari5以下版本在为带透明像素的图像应用阴影时也会有问题——不透明部分的下方本来是该有阴影的却不见了；Safari不能给渐变图像应用阴影，其他浏览器则可以。

4、渐变

渐变由CanvasGradient实例表示。

1）线性渐变

①　使用createLinearGradient()方法创建渐变对象，此方法接收四个参数：起点的x坐标、起点的y坐标、终点的x坐标、终点的y坐标，返回一个CanvasGradient对象的实例。

②　使用addColorStop()方法指定色标，此方法接收两个参数：色标位置（一个0-1之间的数字）和CSS颜色值。

③　把fillStyle或strokeStyle设置为该渐变对象，使用渐变来绘制形状或描边。

var canvas = document.getElementsByTagName("canvas")[0];  
    if (canvas.getContext) {  
    	var context = canvas.getContext("2d");  
    	var gradient = createLinearGradient(30, 30, 80, 80);
    	gradient.addColorStop(0, "red");
    	gradient.addColorStop(1, "blue");
    	context.fillStyle = gradient;
    	context.fillRect(30, 30, 50, 50);
    }

注意：为了让渐变覆盖整个矩形，而不是仅仅应用到矩形的一部分，矩形与渐变必须匹配才行，如context.fillRect(30, 30, 50, 50)只会显示部分渐变效果。因此，为了确保渐变与形状的对齐，可以考虑使用函数来确保坐标合适。

function createLinearGradient(context, x, y, width, height) {
    	return context.createLinearGradient(x, y, x + width, y + height);
    }
    var canvas = document.getElementsByTagNames("canvas")[0];  
    if (canvas.getContext) {  
    	var context = canvas.getContext("2d");  
    	var gradient = createLinearGradient(context, 100, 100, 300, 300);
    	gradient.addColorStop(0, "red");
    	gradient.addColorStop(1, "blue");
    	context.fillStyle = gradient;
    	context.fillRect(100, 100, 200, 200);
    }

2）径向渐变（放射渐变）

①　使用createRadialGradient()方法创建渐变对象，此方法接收6个参数：起点圆的圆心x坐标、y坐标、半径和终点圆的圆心x坐标、y坐标、半径，返回一个CanvasGradient对象的实例。

②　使用addColorStop()方法指定色标，此方法接收两个参数：色标位置（一个0-1之间的数字）和CSS颜色值。

③　把fillStyle或strokeStyle设置为该渐变对象，使用渐变来绘制形状或描边。

var canvas = document.getElementsByTagName("canvas")[0];    
    if (canvas.getContext) {    
        var context = canvas.getContext("2d");    
        var gradient = context.createRadialGradient(150, 150, 10, 150, 150, 20); 
        gradient.addColorStop(0, "red");  
        gradient.addColorStop(1, "blue");  
        context.fillStyle = gradient;  
        context.fillRect(100, 100, 100, 100);  
        
    }

由于创建比较麻烦，径向渐变不是那么容易控制，因此一般使用同心的起点圆和终点圆，这时只需考虑给两个圆设置不同的半径即可。

5、模式

模式其实就是重复的图像，可以用来填充或描边。

使用createPattern()方法可以创建一个新模式，传入两个参数：HTML<img>元素或<canvas>元素或<vedio>元素、用CSS颜background-repeat属性的值（repeat、repeat-x、repeat-y、no-repeat）。

var img = new Image();
    img.src = "images/wrong.png";
    var canvas = document.getElementsByTagName("canvas")[0];    
    if (canvas.getContext) {    
        var context = canvas.getContext("2d");    
        var pattern = context.createPattern(img, "repeat");  
        context.fillStyle = pattern;  
        context.fillRect(0, 0, 100, 100);  
    }

注意：模式与渐变一样，都是从画布的原点(0, 0)开始的，将fillStyle设置为模式对象，只表示某个特定的区域内显示重复的图像，而不是要从某个位置开始绘制重复的图像。

6、使用图像数据

2D上下文的一个长度在于：可以通过getImageData()取得原始图像数据，该方法接收四个参数：要取得原始图像数据的x和y坐标以及宽度和高度，返回的对象是ImageData的实例，每个ImageData对象都有三个属性：width、height和data，其中data属性是一个数组，保存着图像中每一个像素的数据，每一个像素用4个元素来保存，分别表示红、绿、蓝和透明度值，都介于0~255之间。

var imageData = context.getImageData(10, 10, 50, 50);
    var data = imageData;
    var red = data[0];
    var green = data[1];
    var blue = data[2];
    var alpha = data[3];

既然能够通过getImageData()方法直接访问到原始图像数据，就能够以各种方式来操作这些数据。最典型的应用是实现彩色图片转换成黑白图片，详见：[http://blog.csdn.net/zhouziyu2011/article/details/61915099][http_blog.csdn.net_zhouziyu2011_article_details_61915099]。

7、合成

globalAlpha和globalCompositionOperation属性会应用到2D上下文中所有绘制操作。

1）globalAlpha属性

globalAlpha是一个介于0和1之间的值，用于指定所有绘制的透明度，默认值为0。若所有后续操作都要基于相同的透明度，就可以先把globalAlpha设置为适当的值，绘制后再把它设置回默认值0。

var canvas = document.getElementsByTagName("canvas")[0];  
    if (canvas.getContext) {  
    	var context = canvas.getContext("2d");  
    	context.globalAlpha = 0.5;
    	context.fillStyle = "red";
    	context.fillRect(30, 30, 50, 50);
    	context.globalAlpha = 0;
    }

2）globalCompositionOperation属性

globalCompositionOperation表示后绘制的图形怎样与先绘制的图形结合，值为字符串，可能的值如下：

①　source-over（默认值）：后绘制的图形位于先绘制的图形上方；

②　source-in：后绘制的图形与先绘制的图形重叠的部分可见，其他部分完全透明；

③　source-out：后绘制的图形与先绘制的图形不重叠的部分可见，先绘制的图形完全透明；

④　source-atop：后绘制的图形与先绘制的图形重叠的部分可见，先绘制的图形不受影响；

⑤　destination-over：后绘制的图形位于先绘制的图形下方，只有之前透明像素下的部分才可见；

⑥　destination-in：后绘制的图形位于先绘制的图形下方，两者不重叠的部分完全透明；

⑦　destination-out：后绘制的图形擦除先绘制的图形重叠的部分；

⑧　destination-atop：后绘制的图形位于先绘制的图形下方，在两者不重叠的地方，先绘制的图形会变透明；

⑨　lighter：后绘制的图形与先绘制的图形重叠部分的值相加，使该部分变亮；

⑩　copy：后绘制的图形完全替代与之重叠的先绘制的图形；

⑪　xor：后绘制的图形与先绘制的图形重叠的部分执行异或操作。

var canvas = document.getElementsByTagName("canvas")[0];  
    if (canvas.getContext) {  
    	var context = canvas.getContext("2d");  
    	context.fillStyle = "red";
    	context.fillRect(30, 30, 50, 50);
    	context.globalCompositionOperation = "destination-over";
    	context.fillStyle = "blue";
    	context.fillRect(50, 50, 50, 50);
    }

不同浏览器对globalCompositionOperation属性的实现存在较大的差别，Safari和Chrome在这方面还有问题。

[http_blog.csdn.net_zhouziyu2011_article_details_65682406]: http://blog.csdn.net/zhouziyu2011/article/details/65682406
[http_blog.csdn.net_zhouziyu2011_article_details_61915099]: http://blog.csdn.net/zhouziyu2011/article/details/61915099