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

【问题标题】：hmtl5 canvas: transparant animation on top of website elementshtml5 canvas：网站元素顶部的透明动画
【发布时间】：2017-03-09 07:21:41
【问题描述】：

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

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

请帮忙:)

【问题讨论】：

this question 上的答案和 cmets 可能会有所帮助。
感谢乔恩的回答！！

标签： animation canvas ionic-framework

【解决方案1】：

为您的动画使用ctx.clearRect()。我还添加了 background-color:transparent 以防万一，但没有它也可以。

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

【讨论】：

非常感谢您的回答。非常感谢！