在矩形中创建彩虹效果 Canvas

Question

我想知道如何在我的 canvas 填充样式中创建彩虹效果，比如它会在特定时间间隔或在我连续按下某个键时改变颜色。比如从红色到蓝色等等，类似于给文本添加彩虹效果。

<script type="text/javascript">
var GAME_SPEED = 1000/60; //game rate
var x = 100;
var y = 100;
var sideLength = 10;

var leftKey = false;
var rightKey = false;
var upKey = false;
var downKey = false;
var spaceKey = false;

window.onload = function()
 {
  c = document.getElementById("marCanvas2");
  c.width = window.innerWidth*0.9;
  c.height = window.innerHeight*0.9;
  window.setInterval("draw()" , GAME_SPEED);
 }

document.onkeyup = function(event)
{
 switch(event.keyCode)
 {
  case 37: leftKey =false;
  break;
  case 39: rightKey = false;
  break;
  case 38: upKey = false;
  break;
  case 40: downKey = false;
  break;
  case 32: spaceKey = false;
  break;
 }
}

document.onkeydown = function(event)
{
 switch(event.keyCode)
 {
  case 37: leftKey =true;
  break;
  case 39: rightKey = true;
  break;
  case 38: upKey = true;
  break;
  case 40: downKey = true;
  break;
  case 32: spaceKey = true;
  break;
 }
}


function draw()
{
 if(leftKey == true)
{
 x--;
}

if(rightKey == true)
{
 x++;
}

if(upKey == true)
{
 y--;
}

if(downKey == true)
{
 y++;
}

if(spaceKey == true)
{
 sideLength++;
}
 var c = document.getElementById("marCanvas2");
 var cntxt = c.getContext("2d");
 cntxt.fillStyle= " ";
 cntxt.fillRect(x, y, sideLength, sideLength);
}
</script>
</head>
 <body>
 <!--Marlon Jacques -->
<canvas id="marCanvas2" style="border: 5px solid
#000000;">
Your browser does not support the canvas element.
</canvas>
</body>
</html>

Answer 1

您可以通过动态定义渐变的开始和结束来做到这一点。您想要什么颜色取决于您，但是您可以使用例如 HSL 颜色模型 "rotate" 通过具有不同开始和结束速度的颜色范围。

示例 1

var ctx = document.querySelector("canvas").getContext("2d"),
    angleA = Math.random() * 360,                                // start angle (for HSL)
    angleB = Math.random() * 360,
    stepA = 1.2, stepB = 0.7;                                    // "speed" for change

function createGradient() {
  var gr = ctx.createLinearGradient(0, 0, 500, 0);               // create gradient
  gr.addColorStop(0, "hsl(" + (angleA % 360) + ",100%, 50%)");   // start color
  gr.addColorStop(1, "hsl(" + (angleB % 360) + ",100%, 50%)");   // end color
  ctx.fillStyle = gr;                                            // set as fill style
  ctx.fillRect(0, 0, 500, 150);                                  // fill area
}

// demo loop
(function anim() {
  createGradient();
  ctx.clearRect(8,8,484,134);
  // =========> DRAW YOUR FRONT OBJECTS HERE <=========
  angleA += stepA;                                               // increase angles
  angleB += stepB;
  requestAnimationFrame(anim)
})();

<canvas width=500></canvas>

在上面的演示中，开始和结束颜色或多或少是随机的，您可以只给一个开始，让另一个跟随：

示例 2

var ctx = document.querySelector("canvas").getContext("2d"),
    angle = Math.random() * 360,                                 // start angle (for HSL)
    angleDlt = 60,                                               // 60° ahead
    step = 1;                                                    // "speed" for change

function createGradient() {
  var gr = ctx.createLinearGradient(0, 0, 500, 0);               // create gradient
  gr.addColorStop(0, "hsl(" + (angle % 360) + ",100%, 50%)");    // start color
  gr.addColorStop(0.5, "hsl(" + ((angle + (angleDlt/2)) % 360) + ",100%, 50%)");
  gr.addColorStop(1, "hsl(" + ((angle + angleDlt) % 360) + ",100%, 50%)");
  ctx.fillStyle = gr;                                            // set as fill style
  ctx.fillRect(0, 0, 500, 150);                                  // fill area
}

// demo loop
(function anim() {
  createGradient();
  ctx.clearRect(8,8,484,134);
  angle += step;                                               // increase angles
  requestAnimationFrame(anim)
})();

<canvas width=500></canvas>

在矩形中创建彩虹效果 Canvas

Creating a Rainbow Effect in Rectangle Canvas

javascript

html5-canvas

示例 1

示例 2