今ままでこのやり方でwindowの横も縦もフルに取得できていたのに、急にできなくなってしまいました
どこが悪いのか見ていただけませんか?
javascript
1 2<body> 3 <canvas></canvas> 4<script> 5 var cvs = document.querySelector('canvas'); 6 cvs.width = window.innerWidth; 7 cvs.height = window.innerHeight; 8 var c = cvs.getContext('2d'); 9 10 // var gr = c.createLinearGradient(0,0,cvs.width,0); 11 // gr.addColorStop(0,'rgb(255,0,0)'); 12 // gr.addColorStop(0,'rgb(0,255,0)'); 13 // gr.addColorStop(0,'rgb(0,0,255)'); 14 15 c.fillStyle = 'red'; 16 c.fillRect = (0,0,cvs.width,cvs.height); 17 18</script> 19</body>
こっちのコードだと動くんです
javascript
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Ex 11</title> 6 <style> 7 canvas { 8 background: rgb(94, 94, 94); 9 border: 1px solid black; 10 width: 100%; height: 100%; 11 } 12 body { 13 margin: 0; 14 } 15 </style> 16 17</head> 18<body> 19 <canvas></canvas> 20<script> 21 var canvas = document.querySelector('canvas'); 22 canvas.width = window.innerWidth; 23 canvas.height = window.innerHeight; 24 var c = canvas.getContext('2d'); 25 c.lineWidth = "20"; 26 function gridLine() { 27 c.lineWidth = 1; 28 c.fillStyle = "white"; 29 var x = 0; var y = 0; 30 c.beginPath(); 31 c.strokeStyle = "white"; 32 for (i = 0; i < 50; i++) { 33 c.moveTo(x, 0); 34 c.lineTo(x, 1000); 35 c.moveTo(0, y); 36 c.lineTo(2000, y) 37 c.stroke(); 38 x += 50; y += 50; 39 } 40 } 41 gridLine(); 42 43 c.setTransform(1, 0, 0, 1, 0, 0); 44 var x = 100; 45 var y = 100; 46 var w = 50; 47 var h = 50; 48 c.fillStyle = 'rgb(255, 0, 0, 0.5)'; 49 //とりあえず初期値のままだとどうなるか置く. 50 c.fillRect(x, y, w, h); 51 // scale()だけすると開始座標も100, 100動いてしまう 52 c.translate(x + 0.5 * w, y + 0.5 * w); 53 // 開始座標に幅の半分を足す、そのまま書くと斜めにズレるよねぇ 54 c.fillRect(x, y, w, h); 55 //中心そのまま拡大したいのだ!!! 56 c.scale(2, 2); 57 // 幅の半分の座標を負にして描画する 58 c.fillRect(-.5 * w, -.5 * h, w, h); 59 ! 60 61 62 63</script> 64</body> 65</html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。