0

有没有人可以帮我写剧本？参见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");
    }
})();

问题是当您第一次加载页面或刷新浏览器时，脚本不会加载背景图像。而是显示默认背景。我不知道问题是什么。

4

1 回答 1

0

您无需等待图像首先完成下载，因此当您的图像尚不可用时，画布将运行其其余代码。强制它首先加载，或者通过在<img>画布之前有一个带有图像 src 的元素，或者首先创建一个 Image()，给它一个 onload 处理程序，然后设置它的 src 属性，使用 onload 处理程序调用你的画布的代码。

于 2013-04-01T13:43:05.180 回答