如何在 HTML 画布上绘制三角图案？答案

【问题标题】：How to draw a trigonometric pattern on HTML canvas?如何在 HTML 画布上绘制三角图案？
【发布时间】：2013-11-28 12:29:08
【问题描述】：

我正在尝试根据波浪的 Y 值绘制从黑色到红色的线条图形。为了确定我的方法是否正确，我在 JSFiddle 中开始了一个测试：

Test

var j,k; 
k=255;

var green=150;
var blue=150;

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

for(j=0;j<k;j++)
            {

              ctx.beginPath();
              ctx.moveTo(j, 0);
              ctx.lineTo(j, 150);
              ctx.strokeStyle = "rgb("&j&", 0, 0)";
              ctx.stroke();  


            }

但结果只是所有线条中的灰色调，尽管绘图方法在循环内部并且“红色”值正在变化。

【问题讨论】：

在 JavaScript 中 & 是二元 AND 运算符，而不是连接运算符。 jsfiddle.net/nWb6M/1

标签： javascript html canvas gradient lines

【解决方案1】：

将@Juhana 的好建议付诸实践：

var j,k;
k=255;

var green=150;
var blue=150;

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

for(j=0;j<k;j++){
    ctx.beginPath();
    ctx.moveTo(j, 0);
    ctx.lineTo(j, 150);
    ctx.strokeStyle = "rgb("+j+",0,0)";
    ctx.stroke();     
}

【讨论】：