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/

在平移之前：

enter image description here

向右平移后：

enter image description here

关于动态更改地块：

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

只需使用每个新图更新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 个答案: