ゲームを作ろうとしていて、IDを分ければCanvasを分割して別々に回転や縮小できると思ったのですが、位置調整がうまくいきません。widthとheightは設定できるのですが、初期いちはどうやったら任意の位置におけるのでしょうか?
詳しい方よろしくお願いします!
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Canvas X 4</title> 6 <style> 7 * { 8 background: #000; 9 } 10 11 </style> 12</head> 13<body> 14 <canvas id = 'cvs1'></canvas> 15 <canvas id = 'cvs2'></canvas> 16 <canvas id = 'cvs3'></canvas> 17 <canvas id = 'cvs4'></canvas> 18 19 <script> // Dont move ============================= 20 21 22const cvs1 = document.getElementById('cvs1'); 23const c1 = cvs1.getContext('2d'); // Null. 24const cvs2 = document.getElementById('cvs2'); 25const c2 = cvs2.getContext('2d'); // Null. 26const cvs3 = document.getElementById('cvs3'); 27const c3 = cvs3.getContext('2d'); // Null. 28 29const endX = window.innerWidth; 30const endY = window.innerHeight; 31const midX = window.innerWidth/2; 32const midY = window.innerHeight/2; 33 34 35 36function render() { 37 38 c1.clearRect(0,0,endX,endY); 39 c1.fillStyle ='#f00'; 40 c1.fillRect(0,0,midX,midY); 41 42 c2.fillStyle ='#ff0'; 43 c2.fillRect(0,0,midX,midY); 44 45 c3.fillStyle ='#f0f'; 46 c3.fillRect(0,0,midX,midY); 47 48 console.log('midx',midX ); 49 50 51 52 53 54 55 56 requestAnimationFrame(render); // 1000/30fps 57} render(); 58 </script> 59</body> 60</html> 61
あなたの回答
tips
プレビュー