在HTML5画布上点击两次鼠标画一条线?
答
的代码非常简单W3Schools的例子,但你必须得到一个良好的基础:
演示:http://jsfiddle.net/NpDdt/10/
JavaScript:
var clicks = 0;
var lastClick = [0, 0];
document.getElementById('canvas').addEventListener('click', drawLine, false);
function getCursorPosition(e) {
var x;
var y;
if (e.pageX != undefined && e.pageY != undefined) {
x = e.pageX;
y = e.pageY;
} else {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return [x, y];
}
function drawLine(e) {
context = this.getContext('2d');
x = getCursorPosition(e)[0] - this.offsetLeft;
y = getCursorPosition(e)[1] - this.offsetTop;
if (clicks != 1) {
clicks++;
} else {
context.beginPath();
context.moveTo(lastClick[0], lastClick[1]);
context.lineTo(x, y, 6);
context.strokeStyle = '#000000';
context.stroke();
clicks = 0;
}
lastClick = [x, y];
};
答
下面是一个完整的例子,基于在http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_line
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script>
$(function(){
var point1 = new Array();
point1['x'] = false;
point1['y'] = false;
var point2 = new Array();
point2['x'] = false;
point2['y'] = false;
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
$(document).click(function(e){
if (false === point1['x'] || false === point1['y']) {
point1['x'] = e.pageX;
point1['y'] = e.pageY;
return;
}
else if (false === point2['x'] || false === point2['y']) {
point2['x'] = e.pageX;
point2['y'] = e.pageY;
console.log("second");
cxt.moveTo(point1['x'], point1['y']);
cxt.lineTo(point2['x'], point2['y']);
cxt.stroke();
}
});
});
</script>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border: 1px solid #000">Your browser does not support the canvas element.</canvas>
</body>
</html>
这会更好,如果它显示的行后第一次点击给用户一些视觉反馈 – 2016-12-02 16:19:28
@MichaelBellamy这是一个mouseup mousedown可拖动的用户反馈http://codepen.io/caleboleary/pen/PWMVOg感谢一个出发点Blender – 2017-02-21 20:42:33
@ CalebO'Leary当然,很干净! – moeiscool 2017-03-23 23:54:41