绘制文本
- fillText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的.
- strokeText(text, x, y [, maxWidth]) 在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的.
实例:
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = "48px serif";
ctx.fillText("Hello world", 10, 50);
ctx.strokeText("Hello world", 10, 250);
}
设置文本样式
- font = value 当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif.
- textAlign = value 文本对齐选项. 可选的值包括: start, end, left, right or center. 默认值是 start.
- textBaseline = value 基线对齐选项. 可选的值包括: top, hanging, middle, alphabetic, ideographic, bottom. 默认值是 alphabetic.
- direction = value 文本方向. 可能的值包括: ltr, rtl, inherit. 默认值是 inherit.
文本测量
-
measureText()
将返回一个TextMetrics
对象的宽度、所在像素,这些体现文本特性的属性
实例:获取文本宽度
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var text = ctx.measureText("foo"); // TextMetrics object
text.width; // 16;
}
绘制图片
引入图像到canvas里需要以下两步基本操作:
- 获得一个指向
HTMLImageElement
的对象或者另一个canvas元素的引用作为源,也可以通过提供一个URL的方式来使用图片 - 使用
drawImage()
函数将图片绘制到画布上
1>使用相同页面内的图片
-
document.images
集合 -
document.getElementsByTagName()
方法 - 如果你知道你想使用的指定图片的ID,你可以用
document.getElementById()
获得这个图片
2>由零开始创建图像
var img = new Image(); // 创建img元素
img.onload = function(){
// 执行drawImage语句
}
img.src = 'myImage.png'; // 设置图片源地址
注意:若调用 drawImage
时,图片没装载完,那什么都不会发生,因此你应该用load时间来保证不会在加载完毕之前使用这个图片.
绘制图片
drawImage(image, x, y) 其中
image
是 image 或者 canvas 对象,x
和y 是其在目标 canvas 里的起始坐标。
实例:
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
}
img.src = 'images/backdrop.png';
}
缩放 Scaling
- drawImage(image, x, y, width, height)
切片 Slicing
- drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)