Html5 Canvas实现鼠标点击划线

<!DOCTYPE html>

<html>

<head>

body {

background: #eeeeee;

}

#controls {

position: absolute;

left: 25px;

top: 25px;

}

#canvas {

background: #ffffff;

cursor: pointer;

margin-left: 10px;

margin-top: 10px;

-webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);

-moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);

-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);

}

</style>

</head>

<body>

Stroke color:

<option value="green">green</option>

<option value="orange">orange</option>

</select>

Guidewires:

</div>

</body>

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

var eraseAllButton = document.getElementById("eraseAllButton");

var strokeStyleSelect = document.getElementById("strokeStyleSelect");

var guidewireCheckbox = document.getElementById("guidewireCheckbox");

var message = document.getElementById("message");

var drawingSurfacsImageData = null;

var mousedown = {};

var rubberbandRect = {};

var dragging = false;

var guidewires = guidewireCheckbox.checked;

var loc=null;

drawHorizontLine(0);

drawVerticalLine(0);

//获取实际的鼠标在canvas的位置

function windowToCanvas(x, y) {

var bbox = canvas.getBoundingClientRect();

return {

x : x - bbox.left * (canvas.width / bbox.width),

y : y - bbox.top * (canvas.height / bbox.width)

};

}

//保存当前的canvas上的数据

function saveDrawingSurface() {

drawingSurfacsImageData = context.getImageData(0, 0, canvas.width, canvas.height);

}

//恢复canvas的数据，主要用来显示最新的线段，擦除原来的线段

function restoreDrawingSurface() {

context.putImageData(drawingSurfacsImageData,

0, 0, 0, 0, canvas.width, canvas.height

);

}

//应该是计算需要偏移的量???不懂他要这个干嘛

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;

}

if(loc.y > mousedown.y) {

rubberbandRect.top = mousedown.y;

} else {

rubberbandRect.top = loc.y;

}

message.innerHTML = "mousedown.x="+mousedown.x+",mousedown.y="+mousedown.y+",loc.x="+loc.x+",loc.y="+loc.y;

}

//更新

function updateRubberband(loc) {

//此处在《HTML5 canvas核心技术——图形、动画与游戏开发》一书中

//updateRubberbandRectangle方法是没有注释的，但是我不懂要这个

//方法有什么作用，注释之后也不影响，话说我也不用话什么矩形哇

//有知道这个方法在这里是做什么的同学在下方评论一下告知哈

//updateRubberbandRectangle(loc);

drawRubberbandShape(loc);

}

//画最新的线条

function drawRubberbandShape(loc) {

context.beginPath();

context.moveTo(mousedown.x, mousedown.y);

context.lineTo(loc.x, loc.y);

context.stroke();

}

//画横线，在y坐标上

function drawHorizontLine(y) {

context.beginPath();

context.moveTo(0, y+0.5);

context.lineTo(canvas.width, y+0.5);

context.stroke();

}

//画竖线

function drawVerticalLine(x) {

context.beginPath();

context.moveTo(x+0.5, 0);

context.lineTo(x+0.5,canvas.height);

context.stroke();

}

function drawGuidewires(x, y) {

context.save();

context.strokeStyle = "rgba(0,0,230, 0.4)";

context.lineWidth = 0.5;

drawHorizontLine(y);

drawVerticalLine(x);

context.restore();

}

canvas.onmousedown = function(e) {

loc = windowToCanvas(e.clientX, e.clientY);

e.preventDefault();

saveDrawingSurface();

mousedown.x = loc.x;

mousedown.y = loc.y;

dragging = true;

};

canvas.onmousemove = function(e){

//判断当前是否用户在拖动

if(dragging) {

e.preventDefault();

loc = windowToCanvas(e.clientX, e.clientY);

restoreDrawingSurface();

updateRubberband(loc);

if(guidewires) {

//如果选中的加入辅助线

//这里的辅助线应该只有在鼠标那个地方才出现的

drawGuidewires(loc.x, loc.y);

}

};

canvas.onmouseup = function(e) {

loc = windowToCanvas(e.clientX, e.clientY);

restoreDrawingSurface();

updateRubberband(loc);

//鼠标抬起，拖动标记设为否

dragging = false;

};

eraseAllButton.onclick = function(e){

context.clearRect(0, 0, canvas.width, canvas.height);

saveDrawingSurface();

};

strokeStyleSelect.onchange = function(e){

context.strokeStyle = strokeStyleSelect.value;

};

guidewireCheckbox.onchange = function(e){

guidewires = guidewireCheckbox.checked;

};

context.strokeStyle = strokeStyleSelect.value;

</script>

</html>