第一段是画板代码。第二段是拖动和点击的代码
想画之后再拖动好麻烦，我地方法只能是记住画的矩形坐标之后判断鼠标点击点再坐标内
就拖动画板，太麻烦了，如果找到好的方法贴出来。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style>
*{margin: 0; padding: 0;}
canvas{background: #fff;}
</style>
<body>
<canvas width=1200 height=800></canvas>
<script>
var oC = document.getElementsByTagName('canvas')[0];
var gd = oC.getContext('2d');
gd.beginPath();
oC.onmousedown = function(ev){
gd.moveTo(ev.pageX,ev.pageY);
oC.onmousemove = function(ev){
gd.lineTo(ev.pageX,ev.pageY);
console.log(ev.pageX,ev.pageY);
gd.strokeStyle = "red";
gd.stroke();
};
oC.onmouseup = function(){
oC.onmousemove = null;
oC.onmouseup = null;
};
ev.preventDefault();
};
</script>
</body>
</html>
=============================
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style>
*{margin: 0; padding: 0;}
div{width: 100px; height: 100px; background: red; position: absolute; top: 0; left: 0;cursor: pointer;}
</style>
</head>
<body>
<div></div>
<script>
var oDiv = document.getElementsByTagName('div')[0];
oDiv.onmousedown = function(ev){
var oEvent = ev || event;
var disX = oEvent.pageX - oDiv.offsetLeft;
var disY = oEvent.pageY - oDiv.offsetTop;
document.onmousemove = function(ev){
var oEvent = ev || event;
var l = oEvent.pageX - disX;
var t = oEvent.pageY - disY;
oDiv.style.top = t + 'px';
oDiv.style.left = l + 'px';
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
};
oDiv.ondblclick = function(){
oDiv.style.display = 'none';
}
</script>
</body>
</html>