Q&A
canvasのアニメーションを背景にしたいのですがエラーは出ていないのに表示されません。
canvas
1<!DOCTYPE html> 2<html lang = "ja"> 3<head> 4 <meta charset "UTF-8"> 5 <title>Hello Canvas!</title> 6 <style> 7 #cvs{ 8 position: fixed; 9 top: 0; 10 left: 0; 11 width: 100%; 12 height: 100%; 13 z-index: -1; 14 } 15 #warapper{ 16 width: 85%; 17 background: rgba(255,255,255,0.8); 18 margin: 0 auto; 19 } 20 </style> 21</head> 22<body> 23<!-- 中身 --> 24 <div id = "warapper"> 25 <h1>Portfolio</h1> 26 <main> 27 <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaあああああああああ</p> 28 <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaあああああああああああああ</p> 29 <p>aaaaaaaaaaaaaaaaaaaaaaaaaaa</p> 30 <p>aaaaaaaaaaaaaaaaaaaaaaaaaaa</p> 31 </main> 32 </div> 33 34<script> 35 window.addEventListener('load',function(){ 36 draw(); 37 }); 38 function draw(){ 39 var canvas = document.createElement('cvs'); 40 canvas.id = 'cvs'; 41 canvas.width = window.innerWidth; 42 canvas.height = window.innerHeight; 43 document.body.appendChild(canvas); 44 if(!canvas||!canvas.getContext) return; 45 var ctx = canvas.getContext('2d'); 46 47 //フェードアウトアニメーション 48 var alpha = 0; 49 function animation(){ 50 //画面クリア 51 ctx.clearRect(0,0,canvas.width,canvas.height); 52 //透明度を更新 53 alpha += 0.005; 54 //描画 55 //canvas全体をクリア 56 ctx.clearRect(0,0,canvas.width,canvas.height); 57 //描画 58 ctx.fillStyle = '#ffff80'; 59 ctx.globalAlpha = alpha; 60 ctx.beginPath(); 61 ctx.moveTo(50, 100); 62 ctx.lineTo(250,100); 63 ctx.lineTo(85, 210); 64 ctx.lineTo(150,30); 65 ctx.lineTo(215,210); 66 ctx.lineTo(50,100); 67 ctx.fill(); 68 } 69 setInterval(animation,1000/30); 70} 71 72</script> 73</body> 74</html>
表示されるにはどうすればいいでしょうか？
回答1件
0
ベストアンサー
要素名は正しく指定しましょう.
JavaScript
1var canvas = document.createElement('cvs');//HTMLUnknownElement
JavaScript
1var canvas = document.createElement('canvas');//HTMLCanvasElement
エラーが発生していないのは, 下でトラップしている（中途終了している）からです.
JavaScript
1if(!canvas||!canvas.getContext) return;//HTMLUnknownElementにgetContextは存在しない
投稿2017/12/14 11:06
総合スコア4756
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/14 11:19