<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="600" height="300" style="border: 1px solid #000;"></canvas>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.1/min/jcanvas.min.js"></script>
<script>
var layer=0;
CanvasExt = {
drawRect:function(canvasId,penColor,strokeWidth){
var that=this;
that.penColor=penColor;
that.penWidth=strokeWidth;
var canvas=document.getElementById(canvasId);
//canvas 的矩形框
var canvasRect = canvas.getBoundingClientRect();
//矩形框的左上角坐标
var canvasLeft=canvasRect.left;
var canvasTop=canvasRect.top;
var layerIndex=layer;
var layerName="layer";
var x=0;
var y=0;
console.log(layer)
//鼠标点击按下事件，画图准备
canvas.onmousedown=function(e){
//设置画笔颜色和宽度
var color=that.penColor;
var penWidth=that.penWidth;
layerIndex++;
layer++;
layerName+=layerIndex;
x = e.clientX-canvasLeft;
y = e.clientY-canvasTop;
addLayerS(canvasId,color,penWidth,layerName,x,y,1,1);
$("#"+canvasId).drawLayers();
$("#"+canvasId).saveCanvas();
//鼠标移动事件，画图
canvas.onmousemove=function(e){
width = e.clientX-canvasLeft-x;
height = e.clientY-canvasTop-y;
$("#"+canvasId).removeLayer(layerName);
addLayerS(canvasId,color,penWidth,layerName,x,y,width,height);
$("#"+canvasId).drawLayers();
}
};
canvas.onmouseup=function(e){
var color=that.penColor;
var penWidth=that.penWidth;
canvas.onmousemove=null;
width = e.clientX-canvasLeft-x;
height = e.clientY-canvasTop-y;
$("#"+canvasId).removeLayer(layerName);
addLayerS(canvasId,color,penWidth,layerName,x,y,width,height);
$("#"+canvasId).drawLayers();
$("#"+canvasId).saveCanvas();
saveCanvas(x,y,width,height)
}
}
};
function addLayerS(canvasId,color,penWidth,layerName,x,y,width,height){
$("#"+canvasId).addLayer({
type: 'rectangle',
strokeStyle: color,
strokeWidth: penWidth,
name:layerName,
fromCenter: false,
x: x, y: y,
width: width,
height: height
});
console.log(canvasId,color,penWidth,layerName,x,y,width,height)
}
function saveCanvas(x,y,width,height){
console.log(x,y,width,height)
var offset = localStorage.offset;
if(offset){
offset = JSON.parse(offset);
}else{
offset = [];
}
console.log(offset)
offset.push({x:x,y:y,width:width,height:height})
localStorage.offset = JSON.stringify(offset)
}
drawPen();
function drawPen(){
var color = "red";
var width = 1;
var offset = localStorage.offset ;
if(offset){
offset = JSON.parse(offset);
layer = offset.length;
CanvasExt.drawRect("canvas",color,width);
$.each(offset,function(k,v){
$("#canvas").removeLayer('layer'+k);
addLayerS('canvas','red',1,'layer'+k, v.x, v.y, v.width, v.height)
$("#canvas").drawLayers();
$("#canvas").saveCanvas();
})
}else{
CanvasExt.drawRect("canvas",color,width);
} }
</script>
</body>
</html>
