Question

如何将画布放在我的网站顶部，位置为绝对，以便我的动画发生在常规网站之上。现在，当我制作动画时，画布背景变为白色，因此我无法看到我的网站。但我想看到我的网站和位于其上的动画。？

我的最终目标是当我在手机上触摸屏幕时，手指上有小圆圈，但在我能够实现这一点之前，我必须知道我可以先在其他元素上制作动画。至少，这就是我现在的想法。

请帮助：）

Answer 1

使用ctx.clearRect()制作动画。我还添加了背景颜色：透明以防万一，但它没有它。

var ctx = canvas.getContext('2d');
canvas.height = innerHeight;
canvas.width = innerWidth;
function rad(deg){
   return deg*Math.PI/180; 
 }
var t = 360;
function loop(){
    requestAnimationFrame(loop);
    ctx.clearRect(0,0,innerHeight,innerWidth);
    ctx.beginPath();
    ctx.arc(100+50*Math.sin(rad(t)),100+50*Math.cos(rad(t)),40+20*Math.sin(rad(t)),0,Math.PI*2);
    ctx.fillStyle='rgba(255,255,20,0.8)';
    ctx.strokeStyle='red';
    ctx.lineWidth = 5;
    ctx.fill();
    ctx.stroke();
   
  
    t=t>0?t-5:360;
    
  }
loop();

canvas{
  position:absolute;
  background-color:transparent;
  }

<canvas id=canvas></canvas>
<h1>
  Your website.
</h1>
<h2>
  Words words words.
</h2>
words words words words

hmtl5 canvas：网站元素顶部的透明动画

1 个答案: