canvas提供了对文字和图片操作的接口，可以方便我们对文字或图片进行处理。

文字

canvas文字操作和CSS操作文字一样可以设定文字的大小，字体，和文字间对齐方式。

1
2
3
4
5
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.font = "48px serif";
ctx.fillText("Hello world", 50, 100);

  • 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。

图片

canvas可以对图像进行操作（缩放，截取等），还能将canvas内容导出成图片。

canvas 处理图像分为两步：

  1. 获得一个HTMLImageElement的对象或者另一个canvas元素的引用作为图片源，也可以通过提供一个URL的方式来使用图片

  2. 使用drawImage() 或createPattern()函数将图片绘制到画布上

    drawImage第一个参数应该是图片源，它的类型可以是：HTMLImageElement、HTMLVideoElement、HTMLCanvasElement、ImageBitmap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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';
  }

drawImage有三种调用方式：

  1. drawImage(image, dx, dy) 图片的正常渲染

    • image 绘制到上下文的元素
    • dx 目标画布的左上角在目标canvas上 X 轴的位置
    • dy 目标画布的左上角在目标canvas上 Y 轴的位置

  2. drawImage(image, dx, dy, dWidth, dHeight) 用于图片的缩放

    • dWidth 在目标画布上绘制图像的宽度。 允许对绘制的图像进行缩放。 如果不说明， 在绘制时图片宽度不会缩放
    • dHeight 在目标画布上绘制图像的高度。 允许对绘制的图像进行缩放。 如果不说明， 在绘制时图片高度不会缩放

  3. drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 可以用于图片的截取显示

    • sWidth 需要绘制到目标上下文中的，源图像的矩形选择框的宽度。如果不说明，整个矩形从坐标的sx和sy开始，到图像的右下角结束
    • sHeight 需要绘制到目标上下文中的，源图像的矩形选择框的高度
1
2
3
4
5
<canvas id="canvas"></canvas>
<div style="display:none;">
  <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
       width="300" height="227">
</div>
1
2
3
4
5
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = document.getElementById('source');

ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);