Question

每隔n秒，阴影的大小怎么变化？我猜你必须不断创建一个新的圈子并消除前一个圈子？怎么做？而且，是不是有更优化的方式？

function main() {
  var canvas = document.getElementsByTagName("CANVAS")[0],
      ctx = canvas.getContext("2d");
  
  canvas.width = window.innerWidth;
  canvas.height = document.documentElement.scrollHeight;
  var cW = canvas.width,
      cH = canvas.height;
  
  ctx.fillStyle = "#000";
  ctx.fillRect(0, 0, cW, cH);
  ctx.fill();
  
  ctx.beginPath();
  ctx.fillStyle = "#FFF";
  ctx.shadowBlur = 5;
  ctx.shadowColor = "#FFF";
  ctx.arc(cW/2, cH/2, 50, 0, 2 * Math.PI, false);
  ctx.fill();
  ctx.closePath();
}

window.addEventListener("load", main);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <canvas></canvas>
</body>
</html>

Answer 1

创建illegal type variable reference＆amp;一系列的颜色。使用setInterval随机选择任何颜色。修改Math.random函数以接受颜色作为两个参数。

＆＃13;

main

＆＃13;

function main(bckColor, circleColor) {
  var canvas = document.getElementsByTagName("CANVAS")[0],
    ctx = canvas.getContext("2d");
  if (canvas.height) {
    canvas.height = 0;
  }
  canvas.width = window.innerWidth;
  canvas.height = document.documentElement.scrollHeight;
  var cW = canvas.width,
    cH = canvas.height;
  
  ctx.fillStyle = bckColor || "#000";
  //ctx.fillStyle = "red" ;
  ctx.fillRect(0, 0, cW, cH);
  ctx.fill();

  ctx.beginPath();
  ctx.fillStyle = circleColor || "#FFF";
  ctx.shadowBlur = 5;
  ctx.shadowColor = "#FFF";
  ctx.arc(cW / 2, cH / 2, 50, 0, 2 * Math.PI, false);
  ctx.fill();
  ctx.closePath();
}
var colorArray = ['red', 'green', 'yellow', 'blue', 'pink', 'brown', 'orange']
var changeColor = setInterval(function() {

  let bckColor = colorArray[Math.floor(Math.random() * 7 + 1)];
  let circleColor = colorArray[Math.floor(Math.random() * 7 + 1)];
  main(bckColor, circleColor)

}, 2000)
window.addEventListener("load", main);

＆＃13;

Answer 2

而不是每隔x秒重绘一次动画画布本身，我建议使用叠加，创建一个圆形div，将它放在画布上＆＃39;使用css圈出并为其阴影设置动画，您将拥有所需的所有控件，如阴影的颜色和距离，动画速度等等。

这里是fiddle（叠加层位置更好）

＆＃13;

function main() {
  var canvas = document.getElementsByTagName("CANVAS")[0],
    ctx = canvas.getContext("2d");

  canvas.width = window.innerWidth;
  canvas.height = document.documentElement.scrollHeight;
  var cW = canvas.width,
    cH = canvas.height;

  ctx.fillStyle = "#000";
  ctx.fillRect(0, 0, cW, cH);
  ctx.fill();

  ctx.beginPath();
  ctx.fillStyle = "#FFF";
  ctx.shadowBlur = 5;
  ctx.shadowColor = "#FFF";
  ctx.arc(cW / 2, cH / 2, 50, 0, 2 * Math.PI, false);
  ctx.fill();
  ctx.closePath();

  // position the overlay over the circle
  overlay.style.top = (cH / 2 - 99) + 'px'
  overlay.style.left = (cW / 2 - 50) + 'px'
}

window.addEventListener("load", main);

main()

const animationDuration = 2;

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

overlay.style.animationDuration = animationDuration + 's';

setInterval(function() {
  overlay.style.color = getRandomColor()
}, animationDuration * 1000)

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

canvas {
  width: 100vw;
  height: 100vh;
  display: block;
}

#overlay {
  border-radius: 50%;
  background: none;
  animation: shadow linear infinite;
  margin: auto;
  transform: translate(0, 50%);
  color: green;
  position: absolute;
  z-index: 99;
  width: 100px;
  height: 93px;
}

@keyframes shadow {
  0% 100% {
    box-shadow: 0 0 0
  }
  50% {
    box-shadow: 0 0 50px 20px
  }
}

＆＃13;

<canvas></canvas>
<div id="overlay">

</div>

＆＃13;

如何每隔n秒更改画布上圆圈的颜色？

2 个答案: