html5 canvas 笔记三(绘制文本和图片)

时间:2022-02-03 04:30:09

绘制文本

  • 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里需要以下两步基本操作:

  1. 获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源,也可以通过提供一个URL的方式来使用图片
  2. 使用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 对象,xy 是其在目标 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)