hmtl5キャンバス：ウェブサイトの要素の上にトランスパラントアニメーション

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