用户点击时保存Draw Canvas位置

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。这允许用户根据使用的画笔图案标记图案。

我希望能够将用户点击位置保存到localstorage并在可能的情况下调用它们。

以下是我想要保存在下面图像上的位置，您可以看到用户点击的橙色/黄色圆点。我希望能够将它们保存起来并召回它们。

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字符串。这要求用户单击以创建点。如果你需要动态找到点，你需要另一个干净的画布。