【canvas学习笔记五】使用图片

来源：互联网发布：visual studio php 编辑：程序博客网时间：2024/04/30 17:24

在canvas里画图有两个步骤：

获得图片源。
drawImage()画图。

图片源

canvas支持以下几种图片资源：

HTMLImageElement
可以使用Image()方法构造的图片，也可以是HTML的元素。
HTMLVideoElement
可以使用HTML的
HTMLCanvasElement
可以将另一个canvas作为图片资源。
获得图片
如何获得页面中的、

var img = new Image();   // Create new img elementimg.src = 'myImage.png'; // Set source path

脚本开始执行以后，图片就开始加载。
这里需要注意的是，如果图片还没加载完成就用drawImage()方法绘制图片的话，将什么都画不出来，如果是旧版浏览器，还会抛出错误。所以，绘图的时候要确保图片已经加载完成。

var img = new Image();   // Create new img elementimg.addEventListener('load', function() {  // execute drawImage statements here}, false);img.src = 'myImage.png'; // Set source path

如果是只要加载一张图片的话，这个方法是不错的。但是如果有很多图片要加载的话，这个方法就不好了，需要使用到图片预加载的技巧，这个技巧放在后面讲。
我们也可以使用Base64编码将图片嵌在代码里。

var img = new Image();   // Create new img elementimg.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

绘制图片

drawImage(image, x, y)

image是图片引用，x, y是要绘制的图片的左上角的坐标。

最简单的例子

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 = 'https://mdn.mozillademos.org/files/5395/backdrop.png';}

结果

设置图片大小

drawImage(image, x, y, width, height)

drawImage方法也可以指定图片的宽度和高度，缩放图片。

例子

function draw() {  var ctx = document.getElementById('canvas').getContext('2d');  var img = new Image();  img.onload = function() {    for (var i = 0; i < 4; i++) {      for (var j = 0; j < 3; j++) {        ctx.drawImage(img, j * 50, i * 38, 50, 38);      }    }  };  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';}

结果

裁剪

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

各参数的说明看下图：

例子

<html> <body onload="draw();">   <canvas id="canvas" width="150" height="150"></canvas>   <div style="display:none;">     <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">   </div> </body></html>

function draw() {  var canvas = document.getElementById('canvas');  var ctx = canvas.getContext('2d');  // Draw slice  ctx.drawImage(document.getElementById('source'),                33, 71, 104, 124, 21, 20, 87, 104);  // Draw frame  ctx.drawImage(document.getElementById('frame'), 0, 0);}