如何使用HTML5画布创建软划线边缘 [英] how to create soft stroke edge using HTML5 canvas

问题描述

我正在使用HTML5画布创建绘图应用程序。

https://github.com/homanchou/sketchyPad p>

我可以使用rgba来控制线条的不透明度，但是如何实现柔和的羽毛刷边缘和硬圆边缘？

解决方案

三种可能的解决方案：

2. 如果只使用直线段，则可以使用直线段对每个线段使用线性渐变。




3. 在同一位置多次绘制相同的线条。与线段的方向相比，渐变的方向必须为90度角。

使用线性渐变：

http://jsfiddle.net/chdh / MmYAt /

  function drawSoftLine（x1，y1，x2，y2，lineWidth，r，g，b， a）{
 var lx = x2  -  x1; 
 var ly = y2  -  y1; 
 var lineLength = Math.sqrt（lx * lx + ly * ly）; 
 var wy = lx / lineLength * lineWidth; 
 var wx = ly / lineLength * lineWidth; 
 var gradient = ctx.createLinearGradient（x1-wx / 2，y1 + wy / 2，x1 + wx / y1-wy / 2）; 
 //梯度必须定义在行上，90°转向比较
 //到行方向
 gradient.addColorStop（0，rgba + r +，+ g +，+ b +，0））; 
 gradient.addColorStop（0.43，rgba（+ r +，+ g +，+ b +，+ a +））; 
 gradient.addColorStop（0.57，rgba（+ r +，+ g +，+ b +，+ a +））; 
 gradient.addColorStop（1，rgba（+ r +，+ g +，+ b +，0））; 
 ctx.save（）; 
 ctx.beginPath（）; 
 ctx.lineWidth = lineWidth; 
 ctx.strokeStyle = gradient; 
 ctx.moveTo（x1，y1）; 
 ctx.lineTo（x2，y2）; 
 ctx.stroke（）; 
 ctx.restore（）; } 
 

通过减少宽度和增加alpha来绘制线多次的示例：

http://jsfiddle.net/chdh/RmtxL/

  function drawSoftLine（x1，y1，x2，y2，lineWidth，r，g，b，a）{
 ctx.save ; 
 var width = [1,0.8,0.6,0.4,0.2]; 
 var alphas = [0.2，0.4，0.6，0.8，1]; 
 var previousAlpha = 0; 
 for（var pass = 0; pass< widths.length; pass ++）{
 ctx.beginPath（）; 
 ctx.lineWidth = lineWidth * width [pass]; 
 var alpha = a * alphas [pass]; 
 //公式：（1-alpha）=（1-deltaAlpha）*（1- previousAlpha）
 var deltaAlpha = 1-（1-alpha）/（1-previousAlpha）
 ctx .strokeStyle =rgba（+ r +，+ g +，+ b +，+ deltaAlpha +）; 
 ctx.moveTo（x1，y1）; 
 ctx.lineTo（x2，y2）; 
 ctx.stroke（）; 
 previousAlpha = alpha; } 
 ctx.restore（）; } 
  

I'm creating a drawing application using HTML5 canvas.

https://github.com/homanchou/sketchyPad

I can use rgba to control opacity in my line strokes, but how do I achieve a soft feathered brush edge vs a hard circular edge?

解决方案

Three possible solutions:

1. You could write your lines into an off-screen canvas, apply a blur filter, and then draw the result into the visible canvas.

2. If you only use straight line segments, you could use a linear gradient for each line segment. The direction of the gradient must be in an 90" angle compared to the direction of the line segment.

3. Draw the same lines multiple times at the same place. First with the full width and a low alpha. Then decrease the width and increase the alpha.

Example for using a linear gradient for each line segment:

http://jsfiddle.net/chdh/MmYAt/

function drawSoftLine(x1, y1, x2, y2, lineWidth, r, g, b, a) {
   var lx = x2 - x1;
   var ly = y2 - y1;
   var lineLength = Math.sqrt(lx*lx + ly*ly);
   var wy = lx / lineLength * lineWidth;
   var wx = ly / lineLength * lineWidth;
   var gradient = ctx.createLinearGradient(x1-wx/2, y1+wy/2, x1+wx/2, y1-wy/2);
      // The gradient must be defined accross the line, 90° turned compared
      // to the line direction.
   gradient.addColorStop(0,    "rgba("+r+","+g+","+b+",0)");
   gradient.addColorStop(0.43, "rgba("+r+","+g+","+b+","+a+")");
   gradient.addColorStop(0.57, "rgba("+r+","+g+","+b+","+a+")");
   gradient.addColorStop(1,    "rgba("+r+","+g+","+b+",0)");
   ctx.save();
   ctx.beginPath();
   ctx.lineWidth = lineWidth;
   ctx.strokeStyle = gradient;
   ctx.moveTo(x1, y1);
   ctx.lineTo(x2, y2);
   ctx.stroke();
   ctx.restore(); }

Example for drawing a line multiple times, by decreasing width and increasing alpha:

http://jsfiddle.net/chdh/RmtxL/

function drawSoftLine(x1, y1, x2, y2, lineWidth, r, g, b, a) {
   ctx.save();
   var widths = [1   , 0.8 , 0.6 , 0.4 , 0.2  ];
   var alphas = [0.2 , 0.4 , 0.6 , 0.8 , 1    ];
   var previousAlpha = 0;
   for (var pass = 0; pass < widths.length; pass++) {
      ctx.beginPath();
      ctx.lineWidth = lineWidth * widths[pass];
      var alpha = a * alphas[pass];
      // Formula: (1 - alpha) = (1 - deltaAlpha) * (1 - previousAlpha)
      var deltaAlpha = 1 - (1 - alpha) / (1 - previousAlpha)
      ctx.strokeStyle = "rgba(" + r + "," + g + "," + b + "," + deltaAlpha + ")";
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.stroke();
      previousAlpha = alpha; }
   ctx.restore(); }

这篇关于如何使用HTML5画布创建软划线边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！