Html代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>canvas画板</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/canvas.js"></script>
<style>
.board{
border:1px solid red;
}
</style>
</head>
<body "InitThis();">
<canvas class="board" id="myCanvas" width="800px" height="400px"></canvas>
</body>
</html>
js代码
var drawingSurfaceImageData = new Image();
var mousedown = {};
var rubberbandRect = {};
var dragging = false;
function InitThis(){
// 点击canvas当鼠标落下的时候
$('#myCanvas').mousedown(function(e){
var loc = windowToCanvas(e.clientX,e.clientY);
e.preventDefault();
saveDrawingSurface();
mousedown.x = loc.x;
mousedown.y = loc.y;
dragging = true;
});
// 点击canvas当鼠标移动的时候
$('#myCanvas').mousemove(function(e){
var loc;
if(dragging){
e.preventDefault();
loc = windowToCanvas(e.clientX,e.clientY);
restoreDrawingSurface();
updateRubberband(loc);
}
});
// 点击canvas当鼠标抬起的时候
$('#myCanvas').mouseup(function(e){
loc = windowToCanvas(e.clientX, e.clientY);
//恢复在mousedown时保存的画布内容,并在此基础上绘制新的图案。
restoreDrawingSurface();
//画矩形
updateRubberband(loc);
dragging = false;
});
$('#myCanvas').mouseleave(function(e){
dragging = false;
});
}
// 将windows下的坐标转换为canvas上的坐标
function windowToCanvas(x,y){
var canvas = document.getElementById('myCanvas');
var bbox = document.getElementById('myCanvas').getBoundingClientRect();
return {
x: x - bbox.left * (canvas.width / bbox.width),
y: y - bbox.top * (canvas.height / bbox.height)
};
}
// 保存画布上的所有的内容
function saveDrawingSurface(){
context = document.getElementById('myCanvas').getContext('2d');
var canvas = document.getElementById('myCanvas');
// getImageData() 复制画布上指定矩形的像素数据
drawingSurfaceImageData = context.getImageData(0,0,canvas.width,canvas.height);
}
// 恢复画板上的数据
function restoreDrawingSurface(){
context = document.getElementById("myCanvas").getContext('2d');
// 通过 putImageData() 将图像数据放回画布
context.putImageData(drawingSurfaceImageData,0,0);
}
//判断是画什么形状
function updateRubberband(loc){
updateRubberbandRectangle(loc);
drawRubberbandShapeRect(loc);
}
//获取矩形的相对位置和矩形的宽高
function updateRubberbandRectangle(loc){
//得到所要画的矩形的宽
rubberbandRect.width = Math.abs(loc.x - mousedown.x);
//得到所要画的矩形的高
rubberbandRect.height = Math.abs(loc.y - mousedown.y);
//得到矩形相对于左上角的坐标
if(loc.x > mousedown.x){
rubberbandRect.left = mousedown.x;
}else{
rubberbandRect.left = loc.x;
}
//得到矩形相对于左上角的y轴的坐标
if(loc.y > mousedown.y){
rubberbandRect.top = mousedown.y;
}else{
rubberbandRect.top = loc.y;
}
}
//画矩形
function drawRubberbandShapeRect(loc){
context = document.getElementById("myCanvas").getContext('2d');
context.strokeStyle = 'red';
context.fillStyle = false;
context.lineWidth = '2';
context.beginPath();
//context.rect(x,y,width,height);矩形左上角的 x 坐标 矩形左上角的 y 坐标 矩形的宽度,以像素计 矩形的高度,以像素计
context.rect(rubberbandRect.left,rubberbandRect.top,rubberbandRect.width,rubberbandRect.height);
//绘制已经定义的图片
context.stroke();
}