平滑线条并创建渐变

Question

我为一个班级做了这个，我设法创建了一个绘图应用程序，其中笔画对鼠标的速度作出反应，笔画的颜色根据角度而变化。

链接here。

它看起来非常粗糙，我想了解如何通过连接笔划来平滑线条（因此它看起来像是一个改变宽度的笔划）并且如果可以创建的话渐变，从红色变为绿色。我试图从老师那里得到一些帮助，但我们每周大约有10分钟的时间致力于为我们的项目提供个人帮助，而且很难提出所有这些问题并了解代码中发生的事情... < / p>

请注意，我有很多帮助。我之前使用paper.js做了类似的事情，但我的老师更喜欢使用＆＃34; pure＆＃34;画布为此。我有网页设计的背景，但它远离编程，我只知道标记语言并使用html和css，偶尔使用一些jquery滑块。因此，即使是最简单的教程，我也完全感到困惑，我试图遵循this，但我甚至不理解在哪里放置所有东西，它只是没有用。

如果有人能给我一些帮助，我真的很高兴... ELI5，拜托。我是一个快速学习者，但我仍然处于混乱模式，被我不理解的所有这些代码所淹没，但我真的很想。

提前谢谢！

Answer 1

一些提示：

• 设置context.lineCap='round'。这是一个开始和结束。每行结束。该舍入有助于在视觉上将一行合并到下一行。

• 将lineWidth限制在较小范围内。这使得您的线条在视觉上更好地流动，因为当用户快速更改速度时，没有大幅度的跳跃。

这是重构的代码和演示：

// cache a reference to the canvas element & its context
// because they are used often
var canvas=$('#canvas')[0];
var context = canvas.getContext('2d');

//full-screen
canvas.width = 500;
canvas.height = 500;

// style lines with rounded end-caps & rounded joins
context.lineJoin='round';
context.lineCap='round';

var mouseX = undefined;
var mouseY = undefined;
var mouseIsDown = false;

var PI2=Math.PI*2;
var speed=-1000;
(function(){Math.clamp=function(a,b,c){return Math.max(b,Math.min(c,a));}})();

onMouseDown = function( event ){
  // tell the browser we're handling this event
  event.preventDefault();
  event.stopPropagation();
  mouseIsDown = true;
}

onMouseMove = function( event ){
  // tell the browser we're handling this event
  event.preventDefault();
  event.stopPropagation();

  var previousMouseX = mouseX;
  var previousMouseY = mouseY;

  mouseX = event.pageX;
  mouseY = event.pageY;

  var dx = Math.abs( mouseX - previousMouseX );
  var dy = Math.abs( mouseY - previousMouseY );


  var speed = Math.sqrt( dx * dx + dy * dy );

  // limit the min/max width of the line
  speed=Math.clamp(speed,2,12);

  var angle = 2 * Math.PI * Math.acos( dx / ( speed + 0.00001 ) );

  if( angle < Math.PI ){
    context.strokeStyle = 'rgb( 0, 255, 0 )';
  }
  else{
    context.strokeStyle = 'rgb( 255, 0, 0 )';
  }

  if( mouseIsDown ){
    context.lineWidth=speed;
    context.beginPath();
    context.moveTo( previousMouseX, previousMouseY );
    context.lineTo( mouseX, mouseY );
    context.stroke();
  }
}
//drawing only is the mouse is down
onMouseUp = function( event ){
  // tell the browser we're handling this event
  event.preventDefault();
  event.stopPropagation();

  mouseIsDown = false;
}

$( '#canvas' ).on( 'mousedown', onMouseDown );
$( '#canvas' ).on( 'mousemove', onMouseMove );
$( '#canvas' ).on( 'mouseup', onMouseUp );
$( '#canvas' ).on( 'mouseout', onMouseUp );

canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<canvas id="canvas" width=500 height=500></canvas>

应用渐变要困难得多。你必须：

• 保存每个鼠标点
• 插值每个鼠标点之间的点，以便每个新点距离前一个点1px。
• 清除画布
• 重绘每个鼠标点之间的一条线，每条线的strokeStyle根据您所需的渐变而变化。