如何通过canvas学习笔记五，用图片实现创意设计？
摘要：在canvas里画图有两个步骤： 1. 获得图片源。 2. drawImage()画图。 图片源 canvas支持以下几种图片资源： 1. HTMLImageElement 可以使用Image()方法构造的图片，也可以是HTML的元素。 2
在canvas里画图有两个步骤：
获得图片源。
drawImage()画图。
图片源
canvas支持以下几种图片资源：
HTMLImageElement
可以使用Image()方法构造的图片，也可以是HTML的元素。
HTMLVideoElement
可以使用HTML的标签中视频的某一帧作为图片资源。
HTMLCanvasElement
可以将另一个canvas作为图片资源。
获得图片
如何获得页面中的、、元素我就不说了，和任何时候用JS获取这些元素一样，用document.getElementById或document.getElementsByTagName或者其他方法都可以。
简单说下用Image()创建图片的方法。
var img = new Image(); // Create new img element
img.src = 'myImage.png'; // Set source path
脚本开始执行以后，图片就开始加载。
这里需要注意的是，如果图片还没加载完成就用drawImage()方法绘制图片的话，将什么都画不出来，如果是旧版浏览器，还会抛出错误。所以，绘图的时候要确保图片已经加载完成。
var img = new Image(); // Create new img element
img.addEventListener('load', function() {
// execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path
如果是只要加载一张图片的话，这个方法是不错的。但是如果有很多图片要加载的话，这个方法就不好了，需要使用到图片预加载的技巧，这个技巧放在后面讲。
我们也可以使用Base64编码将图片嵌在代码里。
var img = new Image(); // Create new img element
img.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);
}
在这个例子中，使用了标签来作图片源。
如果在CSS中将标签设置为隐藏，那么输出的结果图片将不可见。
结果
光滑
缩放图片可能会造成图象模糊等问题，可以通过 imageSmoothingEnabled属性来控制光滑算法。默认这个属性的值是true。