保存繪製畫布位置時，用戶點擊

Question

我有一個畫布繪製功能：

var sketcher = null; 
    var brush = null; 


    $(document).ready(function(e) { 

    brush = new Image(); 
     brush.src = 'assets/brush2.png'; 
     brush.onload = function(){ 
      sketcher = new Sketcher("sketch", brush); 
     }    
}); 

使用sketcher.js。這允許用戶根據使用的刷子圖案來標記圖案。

我希望能夠將用戶點擊位置保存到本地存儲並在可能的情況下調用它們。

下面是我想要保存在下面圖片上的位置，您可以看到用戶點擊的橙黃色/黃色點。我希望能夠將它們保存並回憶起來。

Answer 1

這裏是我的骯髒的嘗試，你就必須把它清理乾淨一點： http://jsfiddle.net/ACt6v/2/

var canvas = document.getElementById("the-canvas"); 
var ctx = canvas.getContext("2d"); 
var clicks = []; 
var localStorageEnabled = typeof(Storage); 
var loadLink = document.getElementById("load"); 

canvas.onmousedown = function(e) { 
    clicks.push({ 
     x: e.clientX, 
     y: e.clientY 
    }) 

    ctx.fillStyle="blue"; 
    ctx.fillRect(e.clientX - 5, e.clientY - 5, 10, 10); 

    if(localStorageEnabled !=="undefined") { 
     localStorage["clicks"] = JSON.stringify(clicks); 
    } 

} 

loadLink.onmousedown = function(e) { 
    e.preventDefault(); 
    console.log(localStorage["clicks"]); //view the console to see the clicks 
    var readClicks = JSON.parse(localStorage["clicks"]); 

    for (var i = 0 ; i < readClicks.length ; i++) { 
     ctx.fillStyle="red"; 
     ctx.fillRect(readClicks[i].x - 5, readClicks[i].y - 5, 10, 10); 
    } 
} 

基本上保存一個數組作爲它包含的所有座標JSON字符串點。這要求用戶點擊以創建點。如果您需要動態查找點，則需要另一個乾淨的畫布。