使用鼠标在HTML5canvas上绘制

我想使用鼠标在HTMLcanvas上绘制（例如：绘制签名，绘制名称…）

请帮我，我该怎么办？ 请给出一些源代码。 谢谢

这是一个工作示例。 

<html> <script type="text/javascript"> var canvas, ctx, flag = false, prevX = 0, currX = 0, prevY = 0, currY = 0, dot_flag = false; var x = "black", y = 2; function init() { canvas = document.getElementById('can'); ctx = canvas.getContext("2d"); w = canvas.width; h = canvas.height; canvas.addEventListener("mousemove", function (e) { findxy('move', e) }, false); canvas.addEventListener("mousedown", function (e) { findxy('down', e) }, false); canvas.addEventListener("mouseup", function (e) { findxy('up', e) }, false); canvas.addEventListener("mouseout", function (e) { findxy('out', e) }, false); } function color(obj) { switch (obj.id) { case "green": x = "green"; break; case "blue": x = "blue"; break; case "red": x = "red"; break; case "yellow": x = "yellow"; break; case "orange": x = "orange"; break; case "black": x = "black"; break; case "white": x = "white"; break; } if (x == "white") y = 14; else y = 2; } function draw() { ctx.beginPath(); ctx.moveTo(prevX, prevY); ctx.lineTo(currX, currY); ctx.strokeStyle = x; ctx.lineWidth = y; ctx.stroke(); ctx.closePath(); } function erase() { var m = confirm("Want to clear"); if (m) { ctx.clearRect(0, 0, w, h); document.getElementById("canvasimg").style.display = "none"; } } function save() { document.getElementById("canvasimg").style.border = "2px solid"; var dataURL = canvas.toDataURL(); document.getElementById("canvasimg").src = dataURL; document.getElementById("canvasimg").style.display = "inline"; } function findxy(res, e) { if (res == 'down') { prevX = currX; prevY = currY; currX = e.clientX - canvas.offsetLeft; currY = e.clientY - canvas.offsetTop; flag = true; dot_flag = true; if (dot_flag) { ctx.beginPath(); ctx.fillStyle = x; ctx.fillRect(currX, currY, 2, 2); ctx.closePath(); dot_flag = false; } } if (res == 'up' || res == "out") { flag = false; } if (res == 'move') { if (flag) { prevX = currX; prevY = currY; currX = e.clientX - canvas.offsetLeft; currY = e.clientY - canvas.offsetTop; draw(); } } } </script> <body onload="init()"> <canvas id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas> <div style="position:absolute;top:12%;left:43%;">Choose Color</div> <div style="position:absolute;top:15%;left:45%;width:10px;height:10px;background:green;" id="green" onclick="color(this)"></div> <div style="position:absolute;top:15%;left:46%;width:10px;height:10px;background:blue;" id="blue" onclick="color(this)"></div> <div style="position:absolute;top:15%;left:47%;width:10px;height:10px;background:red;" id="red" onclick="color(this)"></div> <div style="position:absolute;top:17%;left:45%;width:10px;height:10px;background:yellow;" id="yellow" onclick="color(this)"></div> <div style="position:absolute;top:17%;left:46%;width:10px;height:10px;background:orange;" id="orange" onclick="color(this)"></div> <div style="position:absolute;top:17%;left:47%;width:10px;height:10px;background:black;" id="black" onclick="color(this)"></div> <div style="position:absolute;top:20%;left:43%;">Eraser</div> <div style="position:absolute;top:22%;left:45%;width:15px;height:15px;background:white;border:2px solid;" id="white" onclick="color(this)"></div> <img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;"> <input type="button" value="save" id="btn" size="30" onclick="save()" style="position:absolute;top:55%;left:10%;"> <input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:55%;left:15%;"> </body> </html>

以下是使用canvas创build绘图应用程序最直接的方法：

  1. 将mousedown ， mousemove和mouseup事件侦听器附加到canvasDOM
  2. 在mousedown ，获取鼠标坐标，并使用moveTo()方法来定位绘图游标和beginPath()方法，以开始一个新的绘图path。
  3. 在mousemove ，用lineTo()不断地添加一个新的点，并用stroke()对最后一个段进行着色。
  4. 在mouseup ，设置一个标志来禁用绘图。

从那里，你可以添加各种其他的function，如给用户select线条的粗细，颜色，画笔，甚至图层的能力。

谷歌search（“HTML5帆布漆程序”）。 看起来像你所需要的。

http://dev.opera.com/articles/view/html5-canvas-painting/

检查这个http://jsfiddle.net/ArtBIT/kneDX/ 。 这应该指导你正确的方向

我正在寻找使用这种方法签名以及我在http://codetheory.in/find一个样本。;

我已经将下面的代码添加到jsfiddle

HTML： 

 <div id="sketch"> <canvas id="paint"></canvas> </div>

使用Javascript： 

  (function() { var canvas = document.querySelector('#paint'); var ctx = canvas.getContext('2d'); var sketch = document.querySelector('#sketch'); var sketch_style = getComputedStyle(sketch); canvas.width = parseInt(sketch_style.getPropertyValue('width')); canvas.height = parseInt(sketch_style.getPropertyValue('height')); var mouse = {x: 0, y: 0}; var last_mouse = {x: 0, y: 0}; /* Mouse Capturing Work */ canvas.addEventListener('mousemove', function(e) { last_mouse.x = mouse.x; last_mouse.y = mouse.y; mouse.x = e.pageX - this.offsetLeft; mouse.y = e.pageY - this.offsetTop; }, false); /* Drawing on Paint App */ ctx.lineWidth = 5; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; ctx.strokeStyle = 'blue'; canvas.addEventListener('mousedown', function(e) { canvas.addEventListener('mousemove', onPaint, false); }, false); canvas.addEventListener('mouseup', function() { canvas.removeEventListener('mousemove', onPaint, false); }, false); var onPaint = function() { ctx.beginPath(); ctx.moveTo(last_mouse.x, last_mouse.y); ctx.lineTo(mouse.x, mouse.y); ctx.closePath(); ctx.stroke(); }; }());

我想，这里的其他例子太复杂了。 这一个更简单，只有JS … 

 // create canvas element and append it to document body var canvas = document.createElement('canvas'); document.body.appendChild(canvas); // some hotfixes... ( ≖_≖) document.body.style.margin = 0; canvas.style.position = 'fixed'; // get canvas 2D context and set him correct size var ctx = canvas.getContext('2d'); resize(); // last known position var pos = { x: 0, y: 0 }; window.addEventListener('resize', resize); document.addEventListener('mousemove', draw); document.addEventListener('mousedown', setPosition); document.addEventListener('mouseenter', setPosition); // new position from mouse event function setPosition(e) { pos.x = e.clientX; pos.y = e.clientY; } // resize canvas function resize() { ctx.canvas.width = window.innerWidth; ctx.canvas.height = window.innerHeight; } function draw(e) { // mouse left button must be pressed if (e.buttons !== 1) return; ctx.beginPath(); // begin ctx.lineWidth = 5; ctx.lineCap = 'round'; ctx.strokeStyle = '#c0392b'; ctx.moveTo(pos.x, pos.y); // from setPosition(e); ctx.lineTo(pos.x, pos.y); // to ctx.stroke(); // draw it! }

这是我非常简单的工作canvas绘制和擦除。

https://jsfiddle.net/richardcwc/d2gxjdva/ 

 //Canvas var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); //Variables var canvasx = $(canvas).offset().left; var canvasy = $(canvas).offset().top; var last_mousex = last_mousey = 0; var mousex = mousey = 0; var mousedown = false; var tooltype = 'draw'; //Mousedown $(canvas).on('mousedown', function(e) { last_mousex = mousex = parseInt(e.clientX-canvasx); last_mousey = mousey = parseInt(e.clientY-canvasy); mousedown = true; }); //Mouseup $(canvas).on('mouseup', function(e) { mousedown = false; }); //Mousemove $(canvas).on('mousemove', function(e) { mousex = parseInt(e.clientX-canvasx); mousey = parseInt(e.clientY-canvasy); if(mousedown) { ctx.beginPath(); if(tooltype=='draw') { ctx.globalCompositeOperation = 'source-over'; ctx.strokeStyle = 'black'; ctx.lineWidth = 3; } else { ctx.globalCompositeOperation = 'destination-out'; ctx.lineWidth = 10; } ctx.moveTo(last_mousex,last_mousey); ctx.lineTo(mousex,mousey); ctx.lineJoin = ctx.lineCap = 'round'; ctx.stroke(); } last_mousex = mousex; last_mousey = mousey; //Output $('#output').html('current: '+mousex+', '+mousey+'<br/>last: '+last_mousex+', '+last_mousey+'<br/>mousedown: '+mousedown); }); //Use draw|erase use_tool = function(tool) { tooltype = tool; //update } 
 canvas { cursor: crosshair; border: 1px solid #000000; } 
 <canvas id="canvas" width="800" height="500"></canvas> <input type="button" value="draw" onclick="use_tool('draw');" /> <input type="button" value="erase" onclick="use_tool('erase');" /> <div id="output"></div>

让我知道如果你有困难实施这一点。 它使用了processing.js，并具有改变颜色和使绘制点越来越小的function。 

 <html> <head> <!--script librarires--> <script type="text/javascript" src="processing.js"></script> <script type="text/javascript" src="init.js"></script> <!--styles --> <style type="text/css" src="stylesheet.css"> </style> </head> <body> <!--toolbox --> <div id="draggable toolbox"></div> <script type="application/processing"> // new script int prevx, prevy; int newx, newy; boolean cliked; color c1 = #000000; int largeur=2; int ps = 20; int px = 50; int py = 50; void setup() { size(500,500); frameRate(25); background(50); prevx = mouseX; prevy = mouseY; cliked = false; } void draw() { //couleur noStroke(0); fill(#FFFFFF);//blanc rect(px, py, ps, ps); fill(#000000); rect(px, py+(ps), ps, ps); fill(#FF0000); rect(px, py+(ps*2), ps, ps); fill(#00FF00); rect(px, py+(ps*3), ps, ps); fill(#FFFF00); rect(px, py+(ps*4), ps, ps); fill(#0000FF); rect(px, py+(ps*5), ps, ps); //largeur fill(#FFFFFF); rect(px, py+(ps*7), ps, ps); fill(#FFFFFF); rect(px, py+(ps*8), ps, ps); stroke(#000000); line(px+2, py+(ps*7)+(ps/2), px+(ps-2), py+(ps*7)+(ps/2)); line(px+(ps/2), py+(ps*7)+1, px+(ps/2), py+(ps*8)-1); line(px+2, py+(ps*8)+(ps/2), px+(ps-2), py+(ps*8)+(ps/2)); if(cliked==false){ prevx = mouseX; prevy = mouseY; } if(mousePressed) { cliked = true; newx = mouseX; newy = mouseY; strokeWeight(largeur); stroke(c1); line(prevx, prevy, newx, newy); prevx = newx; prevy = newy; }else{ cliked= false; } } void mouseClicked() { if (mouseX>=px && mouseX<=(px+ps)){ //couleur if (mouseY>=py && mouseY<=py+(ps*6)){ c1 = get(mouseX, mouseY); } //largeur if (mouseY>=py+(ps*7) && mouseY<=py+(ps*8)){ largeur += 2; } if (mouseY>=py+(ps*8) && mouseY<=py+(ps*9)){ if (largeur>2){ largeur -= 2; } } } } </script><canvas></canvas> </body> </html>

Alco检查这一个：
例：
https://github.com/williammalone/Simple-HTML5-Drawing-App

文档：
http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

本文件包括以下代码：

HTML： 

 <canvas id="canvas" width="490" height="220"></canvas>

JS： 

 context = document.getElementById('canvas').getContext("2d"); $('#canvas').mousedown(function(e){ var mouseX = e.pageX - this.offsetLeft; var mouseY = e.pageY - this.offsetTop; paint = true; addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop); redraw(); }); $('#canvas').mouseup(function(e){ paint = false; }); $('#canvas').mouseleave(function(e){ paint = false; }); var clickX = new Array(); var clickY = new Array(); var clickDrag = new Array(); var paint; function addClick(x, y, dragging) { clickX.push(x); clickY.push(y); clickDrag.push(dragging); } //Also redraw function redraw(){ context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas context.strokeStyle = "#df4b26"; context.lineJoin = "round"; context.lineWidth = 5; for(var i=0; i < clickX.length; i++) { context.beginPath(); if(clickDrag[i] && i){ context.moveTo(clickX[i-1], clickY[i-1]); }else{ context.moveTo(clickX[i]-1, clickY[i]); } context.lineTo(clickX[i], clickY[i]); context.closePath(); context.stroke(); } }

还有一个很棒的例子
http://perfectionkills.com/exploring-canvas-drawing-techniques/

    Interesting Posts

    在同一个库中的Android单笔和多笔笔势混淆了GesturesOverlayView？

    Android：检测用户是否触摸并拖出button区域？

    如何实施移动设备的滑动手势？

    Android：基于速度的ViewPager滚动

    如何模仿ios模拟器上的双指滚动/拖动手势？

    禁用在Android中打开导航抽屉的轻扫手势

    将Fling手势添加到图像视图 – Android

    如何制作一个Android视图，在滑动/滑动视图之间翻转

    UITapGestureRecognizerselect器，发件人是手势，而不是ui对象

    一个服务如何监听触摸手势/事件？