3.1 绘制图像

优质

小牛编辑

140浏览

2023-12-01

通过绘制一幅简单的图像，让我们直奔主题。本节，我们将学习如何加载一幅图像，并把它绘制到画布的某个地方。

绘制步骤

按照以下步骤，在画布中央绘制一幅图像：

1. 定义画布上下文：

window.onload  = function(){
  var canvas  = document.getElementById("myCanvas");
  var context  = canvas.getContext("2d");

2. 创建一个image对象，把onload属性设置为一个绘制图像的函数，然后设置图像的源地址：

  var imageObj  = new Image();
  imageObj.onload  = function() {
    var destX  = canvas.width  /  2  - this.width  /  2;
    var destY  = canvas.height  /  2  - this.height  /  2;
    context.drawImage(this, destX, destY);
  };
  imageObj.src  = "jet_300x214.jpg";
};

3. 在HTML文档的body部分嵌入canvas标签：

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

工作原理

要绘制图像，我们首先需要使用new Image()来创建一个image对象。注意，我们在定义图像源地址之前，设置了image对象的onload属性。

在设置图像的源地址之前，先定义加载图像时的操作，是一个良好的实践。理论上，如果在定义onload属性之前定义图像的源地址，可能在定义完成之前就会加载图像（尽管可能性很小）。

本节的关键方法是drawImage()方法：

context.drawImage(imageObj,destX,destY);

其中，imageObj是image对象，destX 和 destY是我们要放置图像的位置。

了解更多

除了用destX 和 destY定义图像的位置，我们也可以增加另外两个附加参数，destWidth 和 destHeight，来定义图像的尺寸:

context.drawImage(imageObj,destX,destY,destWidth,destHeight);

在大多数情况下，还是不要用drawImage()方法来改变图像的尺寸，因为被缩放后，图像的质量会明显下降，跟使用HTML元素的width和height属性改变图像尺寸的结果类似。如果你关心图像质量（为什么会不关心呢？），通常情况下，如果在创建需要缩放图像的应用，最好还是同时使用缩略图和大图。从另一方面来说，如果你的应用需要动态缩放图像，则调用drawImage()方法，并通过destWidth和destHeight参数来缩放图像，是完全可以接受的方法。