个人中心
gpt4 book ai didi

javascript - 如何在 HTML5 canvas 上绘图时得到平滑的曲线？

转载 作者：行者123 更新时间：2023-11-30 17:32:29 24 4
gpt4 key购买 nike

我正在构建一个使用 Canvas 进行绘图的 HTML5 应用程序，但我在尝试绘制平滑曲线时遇到了问题。

我在我的应用程序中使用 moveTo()，它使用一种模式进行绘制和删除。如何更改我的代码以获得平滑的曲线？这是我的代码:

<!doctype html>
<html>
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<!--[if lt IE 9]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->

<style>

canvas{background:url(images/note.png)}

</style>

<script>
$(function(){

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var lastX;
var lastY;

var strokeColor="green";
var strokeWidth=2;
var mouseX;
var mouseY;
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var isMouseDown=false;
var image = new Image();
image.src = "https://lh5.googleusercontent.com/-Ks_Ti3x-  QdU/UwvFTB_RqaI/AAAAAAAAANk/dOSa3yoTdX8/w140-h140-p/IMG_0478.JPG";



image.onload = function() {
ctx.drawImage(image, 100, 100);
};

function handleMouseDown(e){
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // Put your mousedown stuff here
  lastX=mouseX;
  lastY=mouseY;
  isMouseDown=true;
}

function handleMouseUp(e){
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // Put your mouseup stuff here
  isMouseDown=false;
}

function handleMouseOut(e){
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // Put your mouseOut stuff here
  isMouseDown=false;
}

function handleMouseMove(e){
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // Put your mousemove stuff here
  if(isMouseDown){
      ctx.beginPath();
      if(mode=="pen_black"){
          ctx.globalCompositeOperation="source-over";
          ctx.moveTo(lastX,lastY);
          ctx.lineTo(mouseX,mouseY);
          ctx.stroke(); 
          ctx.lineCap = 'round';
          ctx.strokeStyle="#000000"; 



      }
         if(mode=="pen_blue"){
          ctx.globalCompositeOperation="source-over";
          ctx.moveTo(lastX,lastY);
          ctx.lineTo(mouseX,mouseY);
          ctx.stroke(); 
            ctx.lineCap = 'round';
          ctx.strokeStyle="#0000ff"; 
          //ctx.lineWidth = 15; 

      } 
       if(mode=="pen_green"){
          ctx.globalCompositeOperation="source-over";
          ctx.moveTo(lastX,lastY);
          ctx.lineTo(mouseX,mouseY);
          ctx.stroke(); 
            ctx.lineCap = 'round';
          ctx.strokeStyle="#00FF00"; 
          //ctx.lineWidth = 15; 

      } if(mode=="pen_orange"){
          ctx.globalCompositeOperation="source-over";
          ctx.moveTo(lastX,lastY);
          ctx.lineTo(mouseX,mouseY);
          ctx.stroke(); 
            ctx.lineCap = 'round';
          ctx.strokeStyle="#FF7F00"; 
          //ctx.lineWidth = 15; 

      } 
      if(mode=="pen_white"){
          ctx.globalCompositeOperation="source-over";
          ctx.moveTo(lastX,lastY);
          ctx.lineTo(mouseX,mouseY);
          ctx.stroke(); 
            ctx.lineCap = 'round';
          ctx.strokeStyle="#FFFFFF"; 
          //ctx.lineWidth = 15; 

      } 
         if(mode=="pen_red"){
          ctx.globalCompositeOperation="source-over";
          ctx.moveTo(lastX,lastY);
          ctx.lineTo(mouseX,mouseY);
          ctx.stroke(); 
            ctx.lineCap = 'round';
          ctx.strokeStyle="#FF0000"; 
          //ctx.lineWidth = 15; 

      }  

       if(mode=="size1"){
          ctx.globalCompositeOperation="source-over";
          ctx.moveTo(lastX,lastY);
          ctx.lineTo(mouseX,mouseY);
          ctx.stroke(); 
            ctx.lineCap = 'round';
          ctx.lineWidth = 15; 
          ctx.lineJoin = 'round';

      }  
       if(mode=="size2"){
          ctx.globalCompositeOperation="source-over";
          ctx.moveTo(lastX,lastY);
          ctx.lineTo(mouseX,mouseY);
          ctx.stroke(); 
            ctx.lineCap = 'round';
          ctx.lineWidth = 10; 
          ctx.lineJoin = 'round';

      } 
       if(mode=="size3"){
          ctx.globalCompositeOperation="source-over";
          ctx.moveTo(lastX,lastY);
          ctx.lineTo(mouseX,mouseY);
          ctx.stroke(); 
            ctx.lineCap = 'round';
          ctx.lineWidth = 7; 
          ctx.lineJoin = 'round';

      } 
       if(mode=="eraser"){
          ctx.globalCompositeOperation="destination-out";
          ctx.arc(lastX,lastY,5,0,Math.PI*2,false);
           ctx.lineWidth = 10; 
          ctx.fill();
      }


      lastX=mouseX;
      lastY=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);});

var mode="pen_black";
$("#pen_black").click(function(){ mode="pen_black"; });
   $("#pen_blue").click(function(){ mode="pen_blue"; });
$("#eraser").click(function(){ mode="eraser"; });
$("#size1").click(function(){ mode="size1"; });
$("#size2").click(function(){ mode="size2"; });
$("#size3").click(function(){ mode="size3"; });

$("#pen_green").click(function(){ mode="pen_green"; });
$("#pen_orange").click(function(){ mode="pen_orange"; });
$("#pen_white").click(function(){ mode="pen_white"; });
$("#pen_red").click(function(){ mode="pen_red"; });




}); // end $(function(){});


function save() {
document.getElementById("canvasimg").style.border = "2px solid";
var dataURL = canvas.toDataURL();
document.getElementById("canvasimg").src = dataURL;
document.getElementById("canvasimg").style.display = "inline";
}


</script>

</head>

<body>
<canvas id="canvas" width=614 height=620></canvas></br>
     <img id="canvasimg"  style="position:absolute;top:1%;left:50%;background:url(images/note.png);"  style="display:none;"></img>
<button id="pen_black">Black</button>
    <button id="pen_blue">Blue</button>
    <button id="pen_orange">Orange</button>
    <button id="pen_green">Green</button>
    <button id="pen_red">Red</button>
    <button id="pen_white">White</button>
    <button id="size1">Size 15</button>
    <button id="size2">Size 10</button>
    <button id="size3">size 7</button>
<button id="eraser">Eraser</button>

 <input type="button" value="save" id="save" size="30" onclick="save()"    style="position:absolute;top:80%;left:5%;">
   <input type="button" value="clear" size="30" onclick="history.go()"    style="position:absolute;top:85%;left:5%;">
</body>
</html>

最佳答案

如果您想要一条平滑的线穿过您的所有点，您就是在谈论样条曲线。

这里有几个关于如何使用样条曲线通过数据点绘制平滑曲线的教程:

http://scaledinnovation.com/analytics/splines/aboutSplines.html

enter image description here

http://www.codeproject.com/Tips/562175/Draw-Smooth-Lines-on-HTML5-Canvas

enter image description here

但是!

我看到您在用户移动鼠标时“实时”绘制点。

通过点绘制样条线最好在一组已保存的点上完成。

您可能想要重构代码以将 mousemove 点保存在 points[] 数组中，然后从这些保存的点创建样条。

关于javascript - 如何在 HTML5 canvas 上绘图时得到平滑的曲线？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22698253/

24 4 0
文章推荐： javascript - 将嵌套对象传递给 POST 请求
文章推荐： c# - 如何使 Winforms 表单终止应用程序？
文章推荐： c# - 如何从 C# 调用带有客户端证书的 Web 服务？
文章推荐： javascript - three.js 如何缓存(本地存储)3d 模型和纹理？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com