HTML5 之6 __Canvas: 插入圖片, 圖片載入完時執行回調-H5教程-PHP中文網

HTML5 之6 __Canvas: 插入圖片, 圖片載入完時執行回調

黄舟

發布： 2017-02-18 14:29:15

原創

1606 人瀏覽過

使用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(&#39;trails&#39;);
            var context = canvas.getContext(&#39;2d&#39;);
            context.save();
            context.translate(130, 250);

            createCanopyPath(context);

            context.lineWidth = 4;
            context.lineJoin = &#39;round&#39;;
            context.strokeStyle = &#39;#663300&#39;;
            context.stroke();

            context.fillStyle = &#39;#339900&#39;;
            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 = &#39;#663300&#39;;
            context.lineWidth = 10;
            context.stroke();
            context.restore();
        }
  </script>
</html>

登入後複製

運行效果圖