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

来源：互联网发布：pro tools mac 破解版编辑：程序博客网时间：2024/06/05 02:58

使用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>

运行效果图

可以看到，为bark.jpg图片添加了onload 函数，以保证仅在图像加载完成时才调用 drawTrails 函数.

附件, bark.jpg 图片:

2 0