Canvas 绘图必知：图片加载不全导致画布空白，如何确保图片加载成功？

Canvas绘图并没那么难！加个图片上去也没多复杂。不过，别忘了关键一步哦：保证你的图片都加载完了再动手。这点小失误可就可能让你的画布上看不见图片了，当初我就这么栽过。

图片加载的重要性

我可是在实战里摸爬滚打地领教到了图片加载的重要性！一开始，我没把图片加载不全当回事儿，结果在画布上看到的只是一片白花花。那个时候真的懵逼了，明明按照教程来的？可折腾了半天，查遍了资料，才恍然大悟，原来是图片加载出了岔子。浏览器加载图片是同步的，也就是说，你的脚本跑着，图片可能还没加载完。所以，如果你在图片没加载好的情况下就急急忙忙往画布上画，那肯定是啥也看不见。

使用onload事件确保图片加载

为了解决这个问题，我学着用onload事件。给图片标签加个onload特性，再设个回调函数，这样图片加载完，其他的画图代码才会跟着动起来。这个方法一试就见效，图片终于在Canvas上现出了真身！开心得不得了，不仅解决问题，还提升了我对JavaScript事件原理的认识。


  Image example
   
  
        // 加载纹理图片
        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();
        }

实践中的挑战与解决方案

过程中，还有点小难题。比如图片加载不了时咋办？为了解决这个问题，我学着去看图片的complete和naturalWidth属性，这样就能知道加载成没成功。要是不小心加载失败，我就换个备用图。说到提升性能，我试过用预加载和懒加载这两种方法，可能一开始有点儿难搞懂，不过效果拔群，帮我把Canvas应用的反应速度提上去了，用户们用起来也更舒服！

CanvasAPI的其他功能

CanvasAPI不只是让图片载入简单，还有好多牛逼的技能！比如我会用它画图，写字，还有路径什么的都不在话下。有了这技能，我的Canvas作品就变得超酷炫！我甚至还挑战了一把更难的，比如动画和游戏开发，虽然我现在还不是很懂，但是真的好想学！