如何通过canvas学习笔记五，用图片实现创意设计？

在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方法也可以指定图片的宽度和高度，缩放图片。