翻译后以递归方式清除画布

Question

每次按右键，我都试图平移并保存画布，以便每次按右键时，画布都会水平移动。 这是我每次都在水平移动画布的功能，这是第一次使用，但以后没有使用。

function clearRight(){

var canvas1=document.getElementById('plot');
ctx=canvas1.getContext("2d");
ctx.restore();
ctx.translate(-1000,0);
ctx.save();
ctx.clearRect(0,0,canvas1.width,canvas1.height);
}

rightKey(){
    clearRight();
    draw();
}

谁能指出在移动画布上我出了什么问题？

更新我已经解决了我面临的问题。

水平移动画布

var translated=0;

function clear()
{

    var canvas1=document.getElementById('plot');
    var ctx=canvas1.getContext("2d");
    ctx.restore();
    ctx.save();
    ctx.clearRect(0,0,canvas1.width,canvas1.height);

}

function rightKey()
{   
        clear();
    ctx.clearRect(0,0,canvas1.width,canvas1.height);
    translated += 10;
    ctx.translate(-translated,300);
    draw(ctx);
}

Answer 1

我假设有一个原因，为什么您不只是在较小的div-wrapper中启用滚动条绘制一个超大画布，所以这是一个替代方案。

您可以将整个绘制的图形绘制到单独的画布上。

然后，向左/向右平移，您可以将该临时画布绘制到具有偏移的主画布上。

演示： http : //jsfiddle.net/m1erickson/GfRLq/

向右平移之前：

在此处输入图片说明

向右平移后：

在此处输入图片说明

关于动态更改图：

如果您的图是动态的，那么您仍然可以使用这种平移技术。

只需使用每个新图更新tempCanvas。

示例代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" 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");

    var offset=0;

    // create some test data
    var points=[];
    for(var i=0;i<50;i++){
        points.push({x:i*40,y:100+Math.random()*100-50});
    }

    // create a temporary canvas
    var tempCanvas=document.createElement("canvas");
    var tempCtx=tempCanvas.getContext("2d");

    tempCanvas.width=40*points.length;
    tempCanvas.height=300;

    // draw your complete plot on the tempCanvas

    // draw the line
    tempCtx.beginPath();
    tempCtx.moveTo(points[0].x,points[0].y);
    for(var i=0;i<points.length;i++){
        var point=points[i];
        tempCtx.lineTo(point.x,point.y);
    }
    tempCtx.lineWidth=5;
    tempCtx.strokeStyle="blue";
    tempCtx.stroke();

    // draw the markers
    for(var i=0;i<points.length;i++){
        var point=points[i];
        tempCtx.beginPath();
        tempCtx.arc(point.x,point.y,10,0,Math.PI*2);
        tempCtx.closePath();
        tempCtx.fillStyle="black";
        tempCtx.fill();
        tempCtx.fillStyle="white";
        tempCtx.fillText(i,point.x-3,point.y+3);
    }

    ctx.drawImage(tempCanvas,0,0)


    // function to draw the canvas with your specified offset
    function drawPlotWithOffset(offset){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(tempCanvas,offset,0,canvas.width,canvas.height,0,0,canvas.width,canvas.height)
    }

    $("#left").click(function(){
        offset-=20;
        if(offset<0){offset=0;}
        drawPlotWithOffset(offset);
    });
    $("#right").click(function(){
        offset+=20;
        if(offset>tempCanvas.width-canvas.width){
            offset=tempCanvas.width-canvas.width;
        }
        drawPlotWithOffset(offset);
    });

}); // end $(function(){});
</script>
</head>
<body>
    <button id="left">Pan Left</button><br>
    <button id="right">Pan Right</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

翻译后以递归方式清除画布

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-03-07 19:44:44

翻译后以递归方式清除画布

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-03-07 19:44:44

解决方案1
1 已采纳 2014-03-07 19:44:44