绘制鼠标移动与画布，HMTL5？ [英] Drawing on mouse move with Canvas, HMTL5?
问题描述
我想要实现的是一个简单的功能，当鼠标点击时在画布上绘制线条。
What I am trying to achieve is a simple functionality to draw lines on a canvas when the mouse is clicked.
我已经在线查看代码，并尝试自己实现它，但它不工作。
I have looked at code online and am trying to implement it myself but it won't work.
到目前为止：
<html>
<canvas id="myCanvas" width="400" height="500"> </canvas>
</html>
<script type="text/javascript">
var el = document.getElementById('myCanvas');
var ctx = el.getContext('2d');
var isDrawing;
el.onmousedown = function(e) {
isDrawing = true;
ctx.moveTo(e.clientX, e.clientY);
};
el.onmousemove = function(e) {
if (isDrawing) {
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
}
};
el.onmouseup = function() {
isDrawing = false;
};
</script>
这不会在画布上输出任何内容。我不完全理解代码的事件处理方面（即e.clientX，e.clientY）
我怀疑我必须添加到这些代码为这些部分有想要的效果吗？
This doesn't output anything on the canvas however. I don't fully understand the event handling aspect of the code (i.e, e.clientX, e.clientY) I suspect I must add to this code for these parts to have the desired effect?
推荐答案
有几个问题：
-
通过画布的偏移调整鼠标位置（除非画布位于浏览器的左上角）
Adjust your mouse positions by the offset of the canvas (unless your canvas is at top-left of the browser)
在mousemove中执行所有绘图命令
do all drawing commands in mousemove (otherwise you will restroke the line with every ctx.stroke)
下面是示例代码和演示： http://jsfiddle.net/m1erickson/kkLrT/
Here's example code and a Demo: http://jsfiddle.net/m1erickson/kkLrT/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var BB=canvas.getBoundingClientRect();
var offsetX=BB.left;
var offsetY=BB.top;
var lastX,lastY;
var isDown=false;
canvas.onmousedown=handleMousedown;
canvas.onmousemove=handleMousemove;
canvas.onmouseup=handleMouseup;
function handleMousedown(e){
e.preventDefault();
e.stopPropagation();
lastX=e.clientX-offsetX;
lastY=e.clientY-offsetY;
isDown=true;
}
function handleMouseup(e){
e.preventDefault();
e.stopPropagation();
isDown=false;
}
function handleMousemove(e){
e.preventDefault();
e.stopPropagation();
if(!isDown){return;}
var mouseX=e.clientX-offsetX;
var mouseY=e.clientY-offsetY;
ctx.beginPath();
ctx.moveTo(lastX,lastY);
ctx.lineTo(mouseX,mouseY);
ctx.stroke();
lastX=mouseX;
lastY=mouseY;
}
}); // end $(function(){});
</script>
</head>
<body>
<h4>Drag mouse to draw.</h4>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
这篇关于绘制鼠标移动与画布，HMTL5？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
