如何在html5畫布上繪製具有漸變效果的曲線路徑？

使用javascript我正在繪製一個由多個小直段組成的畫布元素上的'彎曲'路徑：Harmonograph。如何在html5畫布上繪製具有漸變效果的曲線路徑？

現在我希望每個線段都具有不同的顏色，以便沿路徑應用彩虹顏色。因此，路徑以紅色開始，然後逐漸變爲黃色，然後變爲綠色等。

我想僅使用beginPath()和closePath()來加快速度。這是否可能與createLinearGradient();或任何其他標準函數功能，只要它是快速的，因爲整個路徑需要重繪每秒多次。

2013-01-01 Esger

請發佈你目前使用的代碼。 –

@Asad，粘貼代碼似乎不起作用... 但我想你已經找到了我正在使用的代碼[here]（http://www.ashware.nl/harmonograph/js/harmonograph0.5。 js） – Esger

除了分離路徑之外，沒有辦法做到這一點。這裏是我爲你的利薩如圖實現彩虹漸變。你可以看到一個示範here：

drawLissajous: function(points) { 
    if (points.length > 2) { 
     var x, y, x = points[1][0] + this.centerX; 
     y = points[1][1] + this.centerY; 
     ctx = canvas.getContext('2d'); 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     ctx.beginPath(); 
     ctx.moveTo(x, y); 
     for (var count = 2; count < points.length; count++) { 
      ctx.beginPath(); 
      ctx.moveTo(x, y); 
      var newX = points[count][0] + this.centerX, 
       newY = points[count][1] + this.centerY, 
       f = 0.005, 
       blue = Math.sin(f * count + 0) * 127 + 128, 
       red = Math.sin(f * count + 2) * 127 + 128, 
       green = Math.sin(f * count + 4) * 127 + 128; 
      ctx.strokeStyle = 'rgb(' + Math.round(red) + ', ' + Math.round(green) + ', ' + Math.round(blue) + ')'; 
      x = newX; 
      y = newY; 
      ctx.lineTo(x, y); 
      ctx.stroke(); 
      ctx.closePath(); 
     } 
     ctx.stroke(); 
     ctx.closePath(); 
    } 
}

來源

2013-01-02 02:07:26

非常感謝，這就是我正在尋找的。令我感到驚訝的是速度依然很高。穿過彩虹顏色的好方法！ – Esger

@Esger沒問題。你也可以嘗試正在使用的正弦函數：例如，你可以通過給每個波單獨一個頻率來調整模式。或者你可以通過減少最後添加的常量來使圖案變紅。 –

僅供參考，我用你的代碼[here]（http://www.ashware.nl/harmonograph）Thanx。 – Esger

-1

我有同樣的問題，我做了一個簡單的測試，這是工作只是用正常的梯度，希望它是有用的

var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 

    context.beginPath(); 
    context.moveTo(100, 20); 

    // line 1 
    context.lineTo(200, 160); 

    // quadratic curve 
    context.quadraticCurveTo(230, 200, 250, 120); 

    // bezier curve 
    context.bezierCurveTo(290, -40, 300, 200, 400, 150); 

    // line 2 
    context.lineTo(500, 90); 

    // create radial gradient 
    var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300); 
    // light blue 
    grd.addColorStop(0, '#8ED6FF'); 
    // dark blue 
    grd.addColorStop(1, '#004CB3'); 

    context.lineWidth = 5; 
    context.strokeStyle = grd; 
    context.stroke();

here test

來源

2013-11-16 14:24:03 Pnsadeghy

這是錯誤的。您正在創建疊加在線上的徑向漸變，而不是該線後面的漸變。 –

如何在html5畫布上繪製具有漸變效果的曲線路徑？

回答

相關問題