×
广告

HTML5 Canvas 学习

96
Tsung
2015.08.30 12:46* 字数 1381

画布是H5中一个重要的概念,它面向开发人员提供了非常底层的绘图接口,使得绘制速度可以大幅提高,这对游戏等领域极为重要。

为初始化一个画布,使用canvas标签声明相应的画布元素,使用canvas.getContext('2d')可以获得二维的图形操作上下文,这样就可以开始操纵画布了。

线条绘制

最简单的莫过于直线,canvas提供了lineTo这样的接口:

context.beginPath();        // 声明创建新的path
context.moveTo(100, 150);
context.lineTo(450, 50);
context.lineWidth = 3;        // 设置直线的宽度,需要先于stroke的调用
context.strokeStyle = '#ff0000';    // 设置线条的颜色 ,需要先于stroke的调用
context.lineCap = 'round';        // 设置圆角样式
context.stroke();    // 真正使得直线可见

接下来是曲线,canvas提供了arc这个接口:

// 幅度制
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

当然,arc提供的圆的曲线,为了使得曲线能够更加地自由和随意,可以使用 quadraticCurveTo方法。具体来说,首先使用moveTo设置好起点,然后向quadraticCurveTo传入参数(控制点、终止点坐标),即:

context.moveTo(100, 100);    // 起始点
context.quadraticCurveTo(200, 200, 300, 100);    // 控制点和终止点

另外,canvas还提供了一个bezierCurveTo的方法,以提供更加灵活的曲线绘制,它的接口更加地灵活,接受多个控制点作为参数。

组合上面提供的直线、二次曲线、Bezier曲线,就可以提供一个非常复杂的曲线绘制了。

形状绘制

我们可以使用lineToarcToquadraticCurveTobezierCurveTo等绘制线条,再使用context.closePath来闭合曲线,形成一个完整的形状。当然,它也提供了一些基础形状绘制的API,如rect就是用于绘制四边形。为绘制一个圆形,可以使用context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);进行。而半圆的话,就是将里面的参数减半再闭合路径即可。

context.beginPath();
context.moveTo(0, 0);
context.lineTo(30, 30);
context.lineTo(10, 60);
context.closePath();
context.stroke();

我们可以给形状填充颜色,这通过设置上下文的fillStyle属性即可。举个例子,我们需要对一个矩形填充绿色,可以使用:

context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = 'green';
context.fill();

当然,我们也可以填充其它更加丰富的内容,如我们可以填充 Linear Gradient 或 Radial Gradient 类型的颜色,这也是通过设置fillStyle达到的:

var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);  
// var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);    // 也可以换成 Radial Gradient

grd.addColorStop(0, '#8ED6FF');  
grd.addColorStop(1, '#004CB3');
context.fillStyle = grd;    // 设置fillStyle
context.fill();

另外,我们也可以使用图片对形状进行纹理贴图,这一点称为 Pattern,通过调用context.createPattern(imageObj, 'repeat');达到:

var img = new Image();
img.src = "./img.jpg";
img.onload = function () {
    var pattern = context.createPattern(img, 'repeat');    // 后一个参数各类:repeat, repeat-x, repeat-y, no-repeat
    context.fillStyle = pattern;
    context.fill();
}

图像文本操作

drawImage这个方法可以给我们提供在画布上直接绘制图像的能力,一般情况下,我们需要等到图像完全加载完以后才能调用drawImage,drawImage的接口包含图像、绘制坐标、图像大小(可选):

var img = new Image();
img.src = "./img.png";
img.onload = function () {
     context.drawImage(img, 10, 10, 200, 200);    // 在画布坐标(10,10)处开始绘制大小为200 * 200的图像  
}

但有时候,我们可能只需要截取图像中的一部分内容绘制到画布上,drawImage也是支持这种样式的。其调用接口为:

// 其中(srcX, srcY)表示图像的左上角开始的坐标进行裁剪,大小为srcWidth * srcHeight,并绘制到画布(dstX, dstY)坐标上
context.drawImage(img, srcX, srcY, srcWidth, srcHeight, dstX, dstY, dstWidth, dstHeight);

有时候,我们还需要对图像本身作一定的处理(即基于像素级别的图像处理),可以使用context.getImageData(imageX, imageY, imageWidth, imageHeight);获得感兴趣的部分的图像数据,它返回的是ImageData对象。

// 调用drawImage之后,再调用下面的代码
var imageData = context.getImageData(imageX, imageY, imageWidth, imageHeight);
var data = imageData.data;
// iterate over all pixels
for(var i = 0, n = data.length; i < n; i += 4) {
      var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
      // red
      data[i] = brightness;
      // green
      data[i + 1] = brightness;
      // blue
      data[i + 2] = brightness;
} 
context.putImageData(imageData, imageX, imageY, imageWidth, imageHeight);  
// 我们需要对data[i], data[i+1]等数据直接赋值,然后context.drawImage(imageData)即可。

获得像素数据后,我们就可以对图像进行处理了,之后重新调用context.drawImage就好了。HTML5Rocks上提供了一个基于canvas的强大图像处理的简单代码。关于ImageData的具体细节,可以参考MDN上的说明

canvas还具有绘制文本的能力,fillText方法可以向画布上绘制文字,而context.font用于设置文本的字体。 前面提到 fillStyle用于 填充形状颜色,它也可以用于设置文本的颜色。

context.font = 'italic 40pt Arial';
context.fillStyle = 'red';
context.fillText('Hello World!', 150, 100);

如果我们希望显示文本的边界,这时strokeText就非常地实用。

context.font = '60pt Calibri';
context.lineWidth = 3;
context.strokeStyle = 'blue'; 
context.strokeText("ABCDEFG", 100, 100);

如果希望文本既显示实体内容,也显示边界,那么fillTextstrokeText都需要调用。

context.font = '60pt Calibri';
context.lineWidth = 3;
// stroke color
context.fillText("Hello World!", x, y);
context.strokeStyle = 'blue';
context.strokeText('Hello World!', x, y);

TODO: 可以使用textAlign设置文本的水平对齐方式,使用textBaseline设置文本的垂直对齐方式。

// start ,  end ,  left , center , or  right . 

几何变换

canvas现在被大量地运用于游戏等动画领域,最主要的归功于它提供的一系列几何变换方法,使得动画更加地容易。所以其几何变换是非常重要的一节。

几何变换一般包括:旋转(rotate)、平移(translate)、缩放(scale),为支持任意的变换,canvas也提供了transform这个方法 。本质上,它会先对context进行几何变换,然后再绘制。

context.translate(x, y)
context.scale(1, 1.2);
context.rotate(Math.PI / 4);    // 以原点开始逆时针旋转
context.transform(a, b, c, d, e, f);
// 参数对应于如下矩阵
// a c e
// b d f
// 0 0 1  

但有时候,我们可能希望对不同几何体应用不同变换,这时就需要重置之前的变换矩阵,通过向setTransform这个方法传入一个单位矩阵即可实现这个目的。但是,从另一个角度上来说,每次这样重置是很繁琐的,所以canvas还提供了一个save和restore方法对变换状态进行管理。事实上,这和OpenGL通过pushMatrix()和popMatrix();来实现对矩阵状态栈的保存与加载是一致的。以下是一个完整的实例:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var rectWidth = 150;
var rectHeight = 75;

context.save();        // 保存当前变换矩阵I,在此基础上作后续变换,即I * T
// save state 1
context.translate(canvas.width / 2, canvas.height / 2);

context.save();        // 在前一个translate的矩阵基础上进行后续变换,即 I * T * R
// save state 2
context.rotate(Math.PI / 4);

context.save();    //     I * T * R * S
// save state 3
context.scale(2, 2);

context.fillStyle = 'blue';
context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);

context.restore();    // 弹出S,即I * T * R
// restore state 3
context.fillStyle = 'red';
context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);

context.restore();
// restore state 2
context.fillStyle = 'yellow';
context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);

context.restore();
// restore state 1
context.fillStyle = 'green';
context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);

说明

高性能Web
Web note ad 1