質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

486閲覧

canvas, 全画面埋めるRectが動かなくなった

Kaede0902

総合スコア32

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/09/27 15:26

今ままでこのやり方で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); 5960 61 62 63</script> 64</body> 65</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

fillRect()に=が入ってました!!2回目ですすみません!!

投稿2018/09/27 15:50

Kaede0902

総合スコア32

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問