第15章 Canvas
基本用法
- 要使用
<canvas>
元素,必须先设置其width 和height 属性,指定可以绘图的区域大小。出现在
开始和结束标签中的内容是后备信息,如果浏览器不支持元素,就会显示这些信息。下面就
是元素的例子。
<canvas id="drawing" width=" 200" height="200">A drawing of something.</canvas>
- 要在这块画布(canvas)上绘图,需要取得绘图上下文。而取得绘图上下文对象的引用,需要调用
getContext()方法并传入上下文的名字。传入”2d”,就可以取得2D 上下文对象。
var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
var context = drawing.getContext("2d");
//更多代码
} - 使用toDataURL()方法,可以导出在元素上绘制的图像。这个方法接受一个参数,即图像的MIME 类型格式,而且适合用于创建图像的任何上下文。比如,要取得画布中的一幅PNG 格式的图像,可以使用以下代码。
var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
//取得图像的数据URI
var imgURI = drawing.toDataURL("image/png");
//显示图像
var image = document.createElement("img");
image.src = imgURI;
document.body.appendChild(image);
}
- 要使用
2D 上下文
坐标开始于
<canvas>
元素的左上角,原点坐标是(0,0)。所有坐标值都基于这个原点计算,x 值越大表示越靠右,y 值越大表示越靠下。默认情况下,width 和height 表示水平和垂直两个方向上可用的像素数目。两个属性:fillStyle 和strokeStyle
var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
var context = drawing.getContext("2d");
context.strokeStyle = "red";
context.fillStyle = "#0000ff";
}
以上代码将strokeStyle 设置为red(CSS 中的颜色名),将fillStyle 设置为#0000ff(蓝色)。
然后,所有涉及描边和填充的操作都将使用这两个样式,直至重新设置这两个值。如前所述,这两个属
性的值也可以是渐变对象或模式对象。本章后面会讨论这两种对象。
绘制矩形
- fillRect()、strokeRect()和clearRect()。
这三个方法都能接收4 个参数:矩形的x 坐标、矩形的y 坐标、矩形宽度和矩形高度。这些参数的单位都是像素。 - fillRect()方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过fillStyle 属
性指定,比如:
var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
var context = drawing.getContext("2d");
//绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//绘制半透明的蓝色矩形
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30, 30, 50, 50);
} - strokeRect()方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过strokeStyle 属性指定
- fillRect()、strokeRect()和clearRect()。
绘制路径
要绘制路径,首先必须调用beginPath()方法,表示要开始绘制新路径。然后,再通过调用下列方法来实际地绘制路径。
arc(x, y, radius, startAngle, endAngle, counterclockwise):以(x,y)为圆心绘制一条弧线,弧线半径为radius,起始和结束角度(用弧度表示)分别为startAngle 和endAngle。最后一个参数表示startAngle 和endAngle 是否按逆时针方向计算,值为false表示按顺时针方向计算。
arcTo(x1, y1, x2, y2, radius):从上一点开始绘制一条弧线,到(x2,y2)为止,并且以给定的半径radius 穿过(x1,y1)。
bezierCurveTo(c1x, c1y, c2x, c2y, x, y):从上一点开始绘制一条曲线,到(x,y)为止,并且以(c1x,c1y)和(c2x,c2y)为控制点。
lineTo(x, y):从上一点开始绘制一条直线,到(x,y)为止。
moveTo(x, y):将绘图游标移动到(x,y),不画线。
quadraticCurveTo(cx, cy, x, y):从上一点开始绘制一条二次曲线,到(x,y)为止,并且以(cx,cy)作为控制点。
rect(x, y, width, height):从点(x,y)开始绘制一个矩形,宽度和高度分别由width 和height 指定。这个方法绘制的是矩形路径,而不是strokeRect()和fillRect()所绘制的独立的形状。
创建了路径后,接下来有几种可能的选择。如果想绘制一条连接到路径起点的线条,可以调用closePath()。如果路径已经完成,你想用fillStyle 填充它,可以调用fill()方法。另外,还可以调用stroke()方法对路径描边,描边使用的是strokeStyle。最后还可以调用clip(),这个方法可以在路径上创建一个剪切区域。绘制文本
fillText()和strokeText()。这两个方法都可以接收4 个参数:要绘制的文本字符串、x 坐标、y 坐标和可选的最大像素宽度。而且,这两个方法都以下列3 个属性为基础。
font:表示文本样式、大小及字体,用CSS 中指定字体的格式来指定,例如”10px Arial”。
textAlign:表示文本对齐方式。可能的值有”start”、”end”、”left”、”right”和”center”。建议使用”start”和”end”,不要使用”left”和”right”,因为前两者的意思更稳妥,能同时适合从左到右和从右到左显示(阅读)的语言。
textBaseline:表示文本的基线。可能的值有”top”、”hanging”、”middle”、”alphabetic”、
“ideographic”和”bottom”。变换
rotate(angle):围绕原点旋转图像angle 弧度。
scale(scaleX, scaleY):缩放图像,在x 方向乘以scaleX,在y 方向乘以scaleY。scaleX
和scaleY 的默认值都是1.0。
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()。绘制图像
2D 绘图上下文内置了对图像的支持。如果你想把一幅图像绘制到画布上,可以使用drawImage()
方法。根据期望的最终结果不同,调用这个方法时,可以使用三种不同的参数组合。最简单的调用方式
是传入一个HTML<img>
元素,以及绘制该图像的起点的x 和y 坐标。例如:
var image = document.images[0];
context.drawImage(image, 10, 10);
这两行代码取得了文档中的第一幅图像,然后将它绘制到上下文中,起点为(10,10)。绘制到画布上
的图像大小与原始大小一样。如果你想改变绘制后图像的大小,可以再多传入两个参数,分别表示目标
宽度和目标高度。通过这种方式来缩放图像并不影响上下文的变换矩阵。例如:
context.drawImage(image, 50, 10, 20, 30);阴影
2D 上下文会根据以下几个属性的值,自动为形状或路径绘制出阴影。
shadowColor:用CSS 颜色格式表示的阴影颜色,默认为黑色。
shadowOffsetX:形状或路径x 轴方向的阴影偏移量,默认为0。
shadowOffsetY:形状或路径y 轴方向的阴影偏移量,默认为0。
shadowBlur:模糊的像素数,默认0,即不模糊。
这些属性都可以通过context 对象来修改渐变
渐变由CanvasGradient 实例表示,很容易通过2D 上下文来创建和修改。要创建一个新的线性渐
变,可以调用createLinearGradient()方法。这个方法接收4 个参数:起点的x 坐标、起点的y 坐
标、终点的x 坐标、终点的y 坐标。调用这个方法后,它就会创建一个指定大小的渐变,并返回
CanvasGradient 对象的实例。
创建了渐变对象后,下一步就是使用addColorStop()方法来指定色标。这个方法接收两个参数:
色标位置和CSS 颜色值。色标位置是一个0(开始的颜色)到1(结束的颜色)之间的数字。例如:
var gradient = context.createLinearGradient(30, 30, 70, 70);
gradient.addColorStop(0, “white”);
gradient.addColorStop(1, “black”);模式
要创建一个新模式, 可以调用
createPattern()方法并传入两个参数:一个HTML<img>
元素和一个表示如何重复图像的字符串。
其中,第二个参数的值与CSS 的background-repeat 属性值相同,包括”repeat”、”repeat-x”、
“repeat-y”和”no-repeat”。看一个例子。
var image = document.images[0],
pattern = context.createPattern(image, “repeat”);
//绘制矩形
context.fillStyle = pattern;
context.fillRect(10, 10, 150, 150);WebGL 上下文。WebGL 是从OpenGL ES 2.0 移植到浏览器中的,而OpenGL
ES 2.0 是游戏开发人员在创建计算机图形图像时经常使用的一种语言。WebGL 支持比2D 上下文更丰富
和更强大的图形图像处理能力,比如:
用GLSL(OpenGL Shading Language,OpenGL 着色语言)编写的顶点和片段着色器
支持类型化数组,即能够将数组中的数据限定为某种特定的数值类型
创建和操作纹理