目 录 | |
---|---|
1 | 文本 Text |
2 | 图像 Images |
1. 文本 Text
1.1 绘制文本
canvas 提供了两种方法来渲染文本:
-
fillText(text, x, y [, maxWidth])
在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的.
-
strokeText(text, x, y [, maxWidth])
在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的.
下面是绘制文本和文本边框的示例:
function draw1() {
var ctx = document.getElementById('cvs1').getContext('2d');
ctx.font = "48px serif";
ctx.fillText("Blog Ways", 10, 50);
ctx.font = "48px serif";
ctx.strokeText("Blog Ways", 10, 100);
}
font
用于指定文本的大小和字体,具体效果如下:
1.2 文本样式
在上面的例子使用了 font 来改变文本的大小和字体,除此外还有更多属性可以改变canvas显示文本的方式:
-
font = value
当前用来绘制文本的样式,value的使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。
-
textAlign = value
文本对齐选项. 可选项包括:start, end, left, right 或者 center. 默认值是 start。
-
textBaseline = value
基线对齐选项. 可选项包括:top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
-
direction = value
文本方向。可选项包括:ltr, rtl, inherit。默认值是 inherit。
可以在下面例子的textarea中编辑尝试不同选项的效果。
textBaseLine 可选值 top, hanging, middle, alphabetic, ideographic, bottom;
direction 可选值 ltr, rtl, inherit;
2. 图像 Images
canvas 对图像的处理功能可以用于动态的图片合成或者作背景,以及用于游戏界面(Sprites)等等。浏览器支持的任意格式的外部图片都可以使用,比如PNG、GIF或者JPEG,也可以将同一个页面中其他canvas元素生成的图片作为图片源。
引入图像到canvas里需要以下两步基本操作:
- 获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源,也可以通过提供一个URL的方式来使用图片;
- 使用drawImage()函数将图片绘制到画布上。
2.1 图像获取方式
canvas可以使用下面的方法来获取图片:
-
HTMLImageElement
这些图片是由Image()函数构造出来的,或者任何的img元素;
-
HTMLVideoElement
选择一个HTML的video元素作为图片源,此方法可以从视频中抓取当前帧作为一个图像;
-
HTMLCanvasElement
使用同一页面中的canvas元素作为你的图片源。
下面来分别介绍。
2.2 绘制图像
使用脚本创建一个新的 HTMLImageElement 对象,设置图片路径。
var img = new Image(); // 创建一个<img>元素
img.src = '/images/wanghui/canvas3/img.jpg'; // 设置图片源地址
当脚本执行后,图片开始加载。
若调用drawImage()的时候图片还没加载完,那么将不会生成图片(在一些旧的浏览器中可能会抛出异常)。因此应该用load事件来保证图片加载完毕。
var img = new Image(); // 创建img元素
img.onload = function(){
// 执行drawImage语句
}
img.src = 'myImage.png'; // 设置图片源地址
出了使用路径加载外,还可以通过 data:url 的方式来引用图像。Data urls 允许用一串 Base64 编码的字符串的方式来定义一个图片,例如:
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
这种方式的优点是图片内容即时可用,无须再到服务器兜一圈。(还有一个优点是,可以将 CSS,JavaScript,HTML 和 图片全部封装在一起,迁移起来十分方便。)缺点就是图像没法缓存,图片大的话内嵌的 url 数据会相当的长。
下面来看看具体的绘制示例。
function draw4() {
var ctx = document.getElementById('cvs4').getContext('2d');
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
img.src = '/images/wanghui/canvas3/img1.png';
}
这是基本的加载并绘制图片的方式,通过监听load事件确保图片加载完毕。
function draw5() {
var ctx = document.getElementById('cvs5').getContext('2d');
var img = new Image();
img.onload = function() {
for (var i=0;i<3;i++){
for (var j=0;j<3;j++){
ctx.drawImage(img,j*50,i*50,50,38);
}
}
};
img.src = '/images/wanghui/canvas3/img1.png';
}
本例使用了drawImage方法的一种重载,增加了两个用于控制图像在canvas中缩放的参数。
-
drawImage(image, x, y, width, height)
这个方法多了2个参数:width 和 height,这两个参数用来控制 当像canvas画入时应该缩放的大小。
使用此方式可以实现图像的平铺,具体示例如下:
drawImage 方法的另一个重载,也是最后一个变种,共有8个参数,用于控制做切片显示。
-
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
第一个参数和其它的是相同的,都是一个图像或者另一个 canvas 的引用。前4个是定义图像源的切片位置和大小,后4个则是定义切片的目标显示位置和大小。
function draw67() {
var ctx6 = document.getElementById('cvs6').getContext('2d');
var ctx7 = document.getElementById('cvs7').getContext('2d');
var img = new Image();
img.onload = function() {
ctx6.drawImage(img, 0, 0);
ctx7.drawImage(img, 55,65, 85,85, 10,45, 100,100);
};
img.src = '/images/wanghui/canvas3/img1.png';
}
可以对比两张图片来看,8个参数中:
- sx - 定义切片的x坐标;
- sy - 定义切片的y坐标;
- sWidth - 定义切片的长度;
- sHeight - 定义切片的高度;
- dx - 定义切片生成后,位于canvas中的x坐标位置;
- dy - 定义切片生成后,位于canvas中的y坐标位置;
- dWidth - 定义切片后生成图片的长度;
- dHeight - 定义切片后生成图片的高度。
除了引用图片,还可以引用 video中的视频帧。例如:
function draw3() {
var ctx = document.getElementById('cvs3').getContext('2d');
var video = document.getElementById('v1');
video.addEventListener("timeupdate", function(){
ctx.drawImage(video, 0, 0);
}, true);
}
代码监听了视频的timeudate事件,并在canvas里实时绘制视频图像。第一个是video元素加载的视频,第二个是canvas实时绘制的内容。
文本与图像的内容就介绍到这里,下一篇将介绍变形、合成与裁剪。