Question

我有一个canvas元素。我有一些麻烦，如何在“实时”中绘制到用户画布，..所以，当我们打开网站时，我的绘图还没有出现，而是像某人正在绘制的那样画到画布......所以循环坐标。

这就是我到目前为止所尝试的但它是BAAD！它绘制缓慢，需要大量的CPU。

    // Pencil Points
var ppts = [];

/* Drawing on Paint App */

tmp_ctx.lineWidth = 4;
tmp_ctx.lineJoin = 'round';
tmp_ctx.lineCap = 'round';
tmp_ctx.strokeStyle = '#4684F6';
tmp_ctx.fillStyle = '#4684F6';

// Tmp canvas is always cleared up before drawing.
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
tmp_ctx.beginPath();

var timer = 0;

$.timer(500, function() {
    ppts.push({x: 10*timer, y: 5*timer});
    timer++;
})

$.timer(10, function() {
    if (timer > 250) {
        timer = 0;
        clearTempCanvas();
    } else {

        for (var i = 1; i < ppts.length - 2; i++) {
            var c = (ppts[i].x + ppts[i + 1].x) / 2;
            var d = (ppts[i].y + ppts[i + 1].y) / 2;

            tmp_ctx.quadraticCurveTo(ppts[i].x, ppts[i].y, c, d);
        }

        console.log(i);


        tmp_ctx.stroke();
    }
})

function clearTempCanvas() {
    // Writing down to real canvas now
    ctx.drawImage(tmp_canvas, 0, 0);
    // Clearing tmp canvas
    tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
    // Emptying up Pencil Points
    ppts = [];  
}

Answer 1

以下是您可以学习的示例：http://jsfiddle.net/m1erickson/j4HWS/

它的工作原理如下：

定义一些点来制作动画并将这些点放在数组中.points（{x：25，y：50}）
使用requestAnimationFrame创建动画循环
将每个线段分成100个子段，并沿着这些子段进行动画

示例代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        ctx.lineWidth=2;
        ctx.strokeStyle="blue";

        var points=[];
        points.push({x:125,y:125});
        points.push({x:250,y:200});
        points.push({x:125,y:200});
        points.push({x:125,y:125});
        var pointIndex=1;
        var linePct=0;
        var continueAnimating=true;

        var img=new Image();img.onload=start;
        img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/pen.png";
        function start(){
            animate();
        }

        function draw(pointIndex,linePct){

            // clear the canvas
            ctx.clearRect(0,0,canvas.width,canvas.height);

            // draw fully completed lines
            ctx.beginPath();
            ctx.moveTo(points[0].x,points[0].y);
            for(var i=1;i<pointIndex;i++){
                ctx.lineTo(points[i].x,points[i].y);
            }

            // draw current line-in-process
            var pos=getLineXYatPercent(points[pointIndex-1],points[pointIndex],linePct/100);
            ctx.lineTo(pos.x,pos.y);
            ctx.stroke();

            // draw the pen
            ctx.drawImage(img,pos.x-93,pos.y-92);
        }

        function animate() {

            if(!continueAnimating){return;}

            requestAnimationFrame(animate);

            // Drawing code goes here
            draw(pointIndex,linePct);

            if(++linePct>100){
                linePct=1;
                if(++pointIndex>points.length-1){
                    continueAnimating=false;
                }
            }
        }


        function getLineXYatPercent(startPt,endPt,percent) {
            var dx = endPt.x-startPt.x;
            var dy = endPt.y-startPt.y;
            var X = startPt.x + dx*percent;
            var Y = startPt.y + dy*percent;
            return( {x:X,y:Y} );
        }        

    }); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=350 height=350></canvas>
</body>
</html>

如何编写循环以便我将绘制到用户画布？

1 个答案: