如何使用html canvas和javascript绘制一条平滑的连续线

前端之家收集整理的这篇文章主要介绍了如何使用html canvas和javascript绘制一条平滑的连续线前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用html5 canvas和普通javascript创建一个简单的绘制/绘制程序.我的工作正常,但是当绘制和移动鼠标太快时,线路断开连接,我最终得到一条点线 – 我怎样才能使它成为一条平滑的连续线?

建议将不胜感激!我是JS的新手,所以代码示例非常有用,提前感谢.

目前的JS是:

  1. var canvas,ctx
  2. var mouseX,mouseY,mouseDown = 0
  3.  
  4. function draw(ctx,x,y,size) {
  5. ctx.fillStyle = "#000000"
  6. ctx.beginPath()
  7. ctx.arc(x,size,Math.PI*2,true)
  8. ctx.closePath()
  9. ctx.fill()
  10. }
  11.  
  12. function clearCanvas(canvas,ctx) {
  13. ctx.clearRect(0,canvas.width,canvas.height)
  14. }
  15.  
  16. function onMouseDown() {
  17. mouseDown = 1
  18. draw(ctx,mouseX,2)
  19. }
  20.  
  21. function onMouseUp() {
  22. mouseDown = 0
  23. }
  24.  
  25. function onMouseMove(e) {
  26. getMousePos(e)
  27. if (mouseDown == 1) {
  28. draw(ctx,2)
  29. }
  30. }
  31.  
  32. function getMousePos(e) {
  33. if (!e)
  34. var e = event
  35. if (e.offsetX) {
  36. mouseX = e.offsetX
  37. mouseY = e.offsetY
  38. }
  39. else if (e.layerX) {
  40. mouseX = e.layerX
  41. mouseY = e.layerY
  42. }
  43. }
  44.  
  45. function init() {
  46. canvas = document.getElementById('sketchpad')
  47. ctx = canvas.getContext('2d')
  48. canvas.addEventListener('mousedown',onMouseDown,false)
  49. canvas.addEventListener('mousemove',onMouseMove,false)
  50. window.addEventListener('mouseup',onMouseUp,false)
  51. }
  52. init();
  1. <canvas id="sketchpad" width="500" height="500"></canvas>

解决方法

您可以保存最后一个位置并在最后一个点和实际点之间画一条线.
  1. if (lastX && lastY && (x !== lastX || y !== lastY)) {
  2. ctx.fillStyle = "#000000";
  3. ctx.lineWidth = 2 * size;
  4. ctx.beginPath();
  5. ctx.moveTo(lastX,lastY);
  6. ctx.lineTo(x,y);
  7. ctx.stroke();
  8. // ...
  9. lastX = x;
  10. lastY = y;
  11. }

在mouseup事件中,将两个变量设置为零.

  1. var canvas,mouseDown = 0,lastX,lastY;
  2.  
  3. function draw(ctx,size) {
  4. if (lastX && lastY && (x !== lastX || y !== lastY)) {
  5. ctx.fillStyle = "#000000";
  6. ctx.lineWidth = 2 * size;
  7. ctx.beginPath();
  8. ctx.moveTo(lastX,lastY);
  9. ctx.lineTo(x,y);
  10. ctx.stroke();
  11. }
  12. ctx.fillStyle = "#000000";
  13. ctx.beginPath();
  14. ctx.arc(x,true);
  15. ctx.closePath();
  16. ctx.fill();
  17. lastX = x;
  18. lastY = y;
  19. }
  20.  
  21. function clearCanvas(canvas,2)
  22. }
  23.  
  24. function onMouseUp() {
  25. mouseDown = 0;
  26. lastX = 0;
  27. lastY = 0;
  28. }
  29.  
  30. function onMouseMove(e) {
  31. getMousePos(e)
  32. if (mouseDown == 1) {
  33. draw(ctx,false)
  34. }
  35.  
  36. init();
  1. <canvas id="sketchpad" width="600" height="300"></canvas>

猜你在找的HTML相关文章