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

时间:2016-10-26 19:20:01

标签: animation canvas ionic-framework

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

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

请帮助:)

1 个答案:

答案 0 :(得分:0)

使用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