应当注意: 必须等到图片完全加载后才能对其进行操作， 浏览器通常会在页面脚本执行的同时异步加载图片。 如果试图在图片未完全加载之前就将其呈现到canvas 上，将不会显示任何图片.
以下示例将加载一张树皮纹理的图片 作为树干以供 canvas 使用. 为保证在呈现之前图片忆完全加载， 这里提供了回调方法， 即仅当图像加载完 时才执行后续代码
<!DOCTYPE html>
<html>
<title>Image example</title>
<canvas id="trails" style="border: 1px solid;" width="400" height="400"> </canvas>
<script>
// 加载纹理图片
var bark = new Image();
bark.src = "bark.jpg";
// 图片加载完后，将其显示在canvas 上
bark.onload = function () {
drawTrails();
}
function createCanopyPath(context) {
context.beginPath();
context.moveTo(-25, -50);
context.lineTo(-10, -80);
context.lineTo(-20, -80);
context.lineTo(-5, -110);
context.lineTo(-15, -110);
context.lineTo(0, -140);
context.lineTo(15, -110);
context.lineTo(5, -110);
context.lineTo(20, -80);
context.lineTo(10, -80);
context.lineTo(25, -50);
context.closePath();
}
function drawTrails() {
var canvas = document.getElementById('trails');
var context = canvas.getContext('2d');
context.save();
context.translate(130, 250);
createCanopyPath(context);
context.lineWidth = 4;
context.lineJoin = 'round';
context.strokeStyle = '#663300';
context.stroke();
context.fillStyle = '#339900';
context.fill();
// 用背景图案填充 作为树干的矩形
context.drawImage(bark, -5, -50, 20, 70);
context.restore();
context.save();
context.translate(-10, 350);
context.beginPath();
context.moveTo(0, 0);
context.quadraticCurveTo(170, -50, 260, -190);
context.quadraticCurveTo(310, -250, 410,-250);
context.strokeStyle = '#663300';
context.lineWidth = 10;
context.stroke();
context.restore();
}
</script>
</html>运行效果图
可以看到， 为bark.jpg图片添加了onload 函数，以保证仅在图像加载完成时才调用 drawTrails 函数.
附件, bark.jpg 图片:
下载本文