时间：2021-07-01 10:21:17 帮助过：52人阅读
应当注意: 必须等到图片完全加载后才能对其进行操作， 浏览器通常会在页面脚本执行的同时异步加载图片。 如果试图在图片未完全加载之前就将其呈现到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 图片:
以上就是HTML5 之6 __Canvas: 插入图片, 图片加载完时执行回调的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！