在矩形畫布中創建彩虹效果
[英]Creating a Rainbow Effect in Rectangle 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 個解決方案
解決方案1
4 已采納
您可以通過動態定義漸變的開始和結束來實現。 所需的顏色取決於您，但是您可以使用例如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>
創建漸變/彩虹筆觸樣式html5畫布
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.