HTML5 Canvas貝塞爾曲線-背景不想加載

Question

有沒有人可以幫助我編寫腳本？ 參見jsfiddle.net/7QmSz/3 。

HTML：

<canvas id="canvas" height="1000" width="1000" class="bezier" style="cursor: default;"></canvas>

CSS：

#canvas
{
    position: absolute;
    left: 100px;
    top: 100px;
    background-color: rgba(255, 255, 255, 0.1);
}

JavaScript：

(function() {
    var canvas;
    var ctx; 
    var code; 
    var point;
    var style;
    var drag = null; 
    var dPoint;

    function Init(quadratic) {
        point = {
            p1: { x:50, y:100 },
            p2: { x:200, y:100 },
            p3: { x:50 , y:100 },
            p4: { x:200 , y:100 }
        };

        if (quadratic) {
            point.cp1 = { x: 50, y: 50 };
            point.cp3 = { x: 250, y: -110 };
        }
        else {
            point.cp1 = { x: 50, y: 10 };
            point.cp2 = { x: 200, y: 10 };
            point.cp3 = { x: 50, y: 190 };
            point.cp4 = { x: 200, y: 190 };
        }

        style = {
            curve:  { width: 2, color: "#C0C0C0" },
            cpline: { width: 1, color: "#C0C0C0" },
            point: { radius: 3, width: 1, color: "#C0C0C0", fill: "rgba(200,200,200,0.5)", arc1: 0, arc2: 2 * Math.PI },
        }

        ctx.lineCap = "round";
        ctx.lineJoin = "round";

        canvas.onmousedown = DragStart;
        canvas.onmousemove = Dragging;
        canvas.onmouseup = canvas.onmouseout = DragEnd;

        DrawCanvas();
    }

    function DrawCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.lineWidth = style.cpline.width;
        ctx.strokeStyle = style.cpline.color;
        ctx.beginPath();
        ctx.moveTo(point.p1.x, point.p1.y);
        ctx.lineTo(point.cp1.x, point.cp1.y);
        if (point.cp2) {
            ctx.moveTo(point.p2.x, point.p2.y);
            ctx.lineTo(point.cp2.x, point.cp2.y);
        }
        else {
            ctx.lineTo(point.p2.x, point.p2.y);
        }
        ctx.stroke();

        ctx.lineWidth = style.cpline.width;
        ctx.strokeStyle = style.cpline.color;
        ctx.beginPath();
        ctx.moveTo(point.p3.x, point.p3.y);
        ctx.lineTo(point.cp3.x, point.cp3.y);
        if (point.cp2) {
            ctx.moveTo(point.p4.x, point.p4.y);
            ctx.lineTo(point.cp4.x, point.cp4.y);
        }
        else {
            ctx.lineTo(point.p4.x, point.p4.y);
        }
        ctx.stroke();

        ctx.lineWidth = style.curve.width;
        ctx.strokeStyle = style.curve.color;
        ctx.beginPath();
        ctx.moveTo(point.p1.x, point.p1.y);
        if (point.cp2) {
            ctx.bezierCurveTo(point.cp1.x, point.cp1.y, point.cp2.x, point.cp2.y, point.p2.x, point.p2.y);
        }
        else {
            ctx.quadraticCurveTo(point.cp1.x, point.cp1.y, point.p2.x, point.p2.y);
        }
        var img = new Image();
        img.src = 'http://img201.imageshack.us/img201/5708/eyeq.jpg';
        var pattern = ctx.createPattern(img, 'repeat')
        ctx.globalAlpha = "1";
        ctx.fillStyle = pattern;
        ctx.fill();
        ctx.stroke();

        ctx.lineWidth = style.curve.width;
        ctx.strokeStyle = style.curve.color;
        ctx.beginPath();
        ctx.moveTo(point.p3.x, point.p3.y);
        if (point.cp3) {
            ctx.bezierCurveTo(point.cp3.x, point.cp3.y, point.cp4.x, point.cp4.y, point.p4.x, point.p4.y);
        }
        else {
            ctx.quadraticCurveTo(point.cp3.x, point.cp3.y, point.p4.x, point.p4.y);
        }
        var img = new Image();
        img.src = 'http://img201.imageshack.us/img201/5708/eyeq.jpg';
        var pattern = ctx.createPattern(img, 'repeat')
        ctx.globalAlpha = "1";
        ctx.fillStyle = pattern;
        ctx.fill();
        ctx.stroke();

        for (var p in point) {
            if(p == 'cp1' || p == 'cp2' || p == 'cp3' || p == 'cp4')
            {
                ctx.lineWidth = style.point.width;
                ctx.strokeStyle = style.point.color;
                ctx.fillStyle = style.point.fill;
                ctx.beginPath();
                ctx.arc(point[p].x, point[p].y, style.point.radius, style.point.arc1, style.point.arc2, true);
                ctx.fill();
                ctx.stroke();
            }
            else
            {
                ctx.lineWidth = style.point.width;
                ctx.strokeStyle = style.point.color;
                ctx.fillStyle = style.point.fill;
                ctx.beginPath();
                ctx.rect(point[p].x - 4,  point[p].y - 4, 7, 7);
                ctx.fill();
                ctx.stroke();
            }
        }
    }

    function DragStart(e) {
        e = MousePos(e);
        var dx, dy;
        for (var p in point) {
            dx = point[p].x - e.x;
            dy = point[p].y - e.y;
            if ((dx * dx) + (dy * dy) < style.point.radius * style.point.radius) {
                if(p == 'cp1' || p == 'cp2' || p == 'cp3' || p == 'cp4')
                {
                    drag = p;
                    dPoint = e;
                    canvas.style.cursor = "move";
                }
                return;
            }
        }
    }

    function Dragging(e) {
        if (drag) {
            e = MousePos(e);
            point[drag].x += e.x - dPoint.x;
            point[drag].y += e.y - dPoint.y;
            dPoint = e;
            DrawCanvas();
        }
    }

    function DragEnd(e) {
        drag = null;
        canvas.style.cursor = "default";
        DrawCanvas();
    }

    function MousePos(event) {
        event = (event ? event : window.event);
        return {
            x: event.pageX - canvas.offsetLeft,
            y: event.pageY - canvas.offsetTop
        }
    }

    canvas = document.getElementById("canvas");
    if (canvas.getContext) {
        ctx = canvas.getContext("2d");
        Init(canvas.className == "quadratic");
    }
})();

問題在於，當您第一次加載頁面或刷新瀏覽器時，腳本不會加載背景圖像。 而是顯示默認背景。 我不知道問題是什么。

Answer 1

您不必等待圖像先完成下載，因此在圖像尚不可用時，畫布將運行其余代碼。 強制其首先加載，方法是在畫布之前通過<img>元素在圖像中添加src，或者先創建Image（），為其提供onload處理程序，然后設置其src屬性，並通過onload處理程序調用您的畫布的代碼。