วาดเส้นที่มีความกว้างเปลี่ยนแปลงต่อเนื่องบน HTML Canvas

เพื่อวาดเส้นที่มีความกว้างเปลี่ยนแปลงต่อเนื่อง ลองรันโค้ดด้านล่าง:

ตัวอย่าง

var context = document.getElementById('canvas1').getContext('2d');
var pts = [null, null, null, null];
for(var i = -1; i < 25; i = i + 1) {
  var width = 0.5 + i / 2;
  var m = 200;
  var x = Math.cos(i / 4) * 180;
  var y = Math.sin(i / 4) * 140;
  pts[0] = pts[1];
  pts[1] = pts[2];
  pts[2] = { X: x, Y: y };
  if(pts[0] == null) continue;
  var p0 = pts[0];
  var p1 = pts[1];
  var p2 = pts[2];
  var x0 = (p0.X + p1.X) / 2;
  var y0 = (p0.Y + p1.Y) / 2;
  var x1 = (p1.X + p2.X) / 2;
  var y1 = (p1.Y + p2.Y) / 2;
  context.beginPath();
  context.lineWidth = width;
  context.strokeStyle = "blue";
  context.moveTo(m + x0, m + y0);
  context.quadraticCurveTo(m + p1.X, m + p1.Y, m + x1, m + y1);
  context.stroke();
}