翻譯后以遞歸方式清除畫布

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