1

我有一个小画布，每次单击它时都会绘制随机矩形。在添加的每个新矩形上，整个画布都会保存到localStorage。

刷新网页时，会加载来自 localStorage 的最后保存的图像。

问题： 我必须刷新两次才能获得最后一张图像/捕获。Rrefreshing once 只给了我一个空白画布。为什么是这样？

索引.html：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="./script.js"></script>
    </head>
    <body>
        <canvas onclick="draw(this, event);" id="drawarea" height="240" width="320" style="border:1px solid black;">
        </canvas>
    </body>
</html>

脚本.js：

"use strict;"

window.onload=function(){
    c=document.getElementById("drawarea");
    if (c) initCanvas(c);
};

function initCanvas(canvas){
    // Load last canvas
    loadLastCanvas(canvas);
}

function draw(canvas, event){

    // Draw at random place
    ctx=c.getContext("2d");
    ctx.fillStyle="#ff0000";
    ctx.beginPath();
    ctx.fillRect (250*Math.random()+1, 220*Math.random()+1, 40, 30);
    ctx.closePath();
    ctx.fill();

    // Save canvas
    saveCanvas(canvas);
}

function saveCanvas(c){
    localStorage['lastImgURI']=c.toDataURL("image/png");
}

function loadLastCanvas(c){
    if (!localStorage['lastImgURI']) return;
    img = new Image();
    img.src= localStorage['lastImgURI'];
    ctx=c.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
}
4

1 回答 1

1

问题是这img.src = ""是一个异步调用。所以你必须为onload事件添加一个回调。有关更多信息，请参阅html5canvastutorials.com。

function loadLastCanvas(c){
    if (!localStorage['lastImgURI']) return;
    img = new Image();
    img.onload = function() {
       ctx=c.getContext("2d");
       ctx.drawImage(img, 0, 0, img.width, img.height);
    };
    img.src= localStorage['lastImgURI'];
}
于 2012-08-14T07:13:26.770 回答