I am trying to draw a line on canvas using mousedown
, mousemove
, mouseup
events, but I am unable to set coordinates for drawing a line on Canvas. Here I am using the following JavaScript code:
function line()
{
canvas = document.getElementById("drawingCanvas");
context = canvas.getContext("2d");
canvas.onmousedown = startLine;
canvas.onmouseup = drawLine;
canvas.onmouseout = stopLine;
//canvas.onmousemove =drawLine;
};
function startLine(e)
{
isLine = true;
context.beginPath();
context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
}
function drawLine(e)
{
if (isLine==true)
{
var x = e.pageX - canvas.offsetLeft;
var y = e.pageY - canvas.offsetTop;
context.lineTo(x ,y);
context.stroke();
context.closePath();
}
cPush();
}
function stopLine()
{
isLine = false;
}
When I am using mousemove
event for drawLine()
method it is drawing multiple lines. Can you lease tell me what wrong in my code?
Basically, you need to refactor your code to do beginPath+moveTo+lineTo+stroke inside mousemove.
Otherwise you will get those multiple lines...
In mouseDown: Save the startX/startY and set the isDown flag to indicate the drag has started:
function handleMouseDown(e){
e.preventDefault();
startX=parseInt(e.clientX-offsetX);
startY=parseInt(e.clientY-offsetY);
isDown=true;
}
In mouseMove: Draw a new line from startX/Y to mouseX/Y and reset startX/Y=mouseX/Y
function handleMouseMove(e){
if(!isDown){return;}
e.preventDefault();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
ctx.beginPath(); // use beginPath for every segment of the line
ctx.moveTo(startX,startY);
ctx.lineTo(mouseX,mouseY);
ctx.stroke();
startX=mouseX;
startY=mouseY;
}
In mouseUP: Clear the isDown flag to indicate the drag has ended:
function handleMouseUp(e){
e.preventDefault();
isDown=false;
}
Here's code and a Fiddle: http://jsfiddle.net/m1erickson/hzNg4/
<!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 $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var scrollX=$canvas.scrollLeft();
var scrollY=$canvas.scrollTop();
var isDown=false;
var startX;
var startY;
function handleMouseDown(e){
e.preventDefault();
startX=parseInt(e.clientX-offsetX);
startY=parseInt(e.clientY-offsetY);
isDown=true;
}
function handleMouseUp(e){
e.preventDefault();
isDown=false;
}
function handleMouseOut(e){
e.preventDefault();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
isDown=false;
}
function handleMouseMove(e){
if(!isDown){return;}
e.preventDefault();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(mouseX,mouseY);
ctx.stroke();
startX=mouseX;
startY=mouseY;
}
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseOut(e);});
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
Try this way ( DEMO ) :
function line() {
canvas = document.getElementById("drawingCanvas");
context = canvas.getContext("2d");
canvas.onmousedown = startLine;
canvas.onmouseup = canvas.onmouseout = stopLine;
canvas.onmousemove = drawLine;
};
function startLine(e) {
isLine = true;
context.beginPath();
context.moveTo(startX = (e.pageX - canvas.offsetLeft),
startY = (e.pageY - canvas.offsetTop));
}
function drawLine(e) {
if (isLine) {
var x = e.pageX - canvas.offsetLeft;
var y = e.pageY - canvas.offsetTop;
context.clearRect(0, 0, 300, 150); // width = 300, height = 150
context.beginPath();
context.moveTo(startX, startY);
context.lineTo(x, y);
context.stroke();
context.closePath();
}
//cPush();
}
function stopLine() {
isLine = false;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.