HTML5 Canvas实战
3.1 绘制图像
阅读(

路径和文本

图形及组合

处理图像和视频

绘制图像

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

绘制图像
图3-1 绘制图像

绘制步骤

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

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参数来缩放图像,是完全可以接受的方法。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验