HTML5之6__Canvas:插入图片,图片加载完时执行回调

来源：动视网责编：小采时间：2020-11-27 15:12:43

HTML5之6__Canvas:插入图片,图片加载完时执行回调

HTML5之6__Canvas:插入图片,图片加载完时执行回调:使用canvas API 内置的几个简单命令可以轻松地为canvas 添加图片内容,应当注意: 必须等到图片完全加载后才能对其进行操作，浏览器通常会在页面脚本执行的同时异步加载图片。如果试图在图片未完全加载之前就将其呈现到canvas 上，将不会显示任何图片. 以下

推荐度：

点击下载本文 文档为doc格式

导读HTML5之6__Canvas:插入图片,图片加载完时执行回调:使用canvas API 内置的几个简单命令可以轻松地为canvas 添加图片内容,应当注意: 必须等到图片完全加载后才能对其进行操作，浏览器通常会在页面脚本执行的同时异步加载图片。如果试图在图片未完全加载之前就将其呈现到canvas 上，将不会显示任何图片. 以下

使用canvas API 内置的几个简单命令可以轻松地为canvas 添加图片内容,

应当注意: 必须等到图片完全加载后才能对其进行操作，浏览器通常会在页面脚本执行的同时异步加载图片。如果试图在图片未完全加载之前就将其呈现到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>

运行效果图