在矩形画布中创建彩虹效果

时间：2015-03-12 10:27:30

标签： javascript html5-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>

1 个答案:

答案 0 :(得分：3)

您可以通过动态定义渐变的开始和结束来完成此操作。您想要什么颜色取决于您，但您可以使用HSL颜色模型来“旋转”一个颜色范围，以不同的速度开始和结束。

示例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>