🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
canvas

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1520閲覧

HTMLで縦方向に伸びた描画を、適切に表示させたい

mutuki

総合スコア3

canvas

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/02/02 21:20

前提・実現したいこと

HTMLを用いたパチンコゲームで、y軸に伸びた描画を適切な長さに直したい。

発生している問題・エラーメッセージ

線を描画した際、x軸方向(横)と比べy軸方向(縦)に伸びてしまう。 また、表示したいゲーム画面に対して見切れてしまう。

該当のソースコード

<style> #canvas { width:500px; height:600px; touch-action: none; } </style> <script src="Tiny2D.js"></script> <script> "use strict"; var ctx,engine,timer,offset = 0,catcher,score = 0,isMouseDown = false; var walls = [ [-100, -100, 100, 800], [-100, -100, 800, 100], [500, -100, 100, 800] ]; var lines = [ [150, -50, -50, 150], [350, -50, 550, 150], [450, 200, 450, 800] ]; function init(){ //エンジン初期化&イベントハンドラ設定 engine = new Engine(-100, -100, 700, 800, 0, 9.8); var canvas = document.getElementById("canvas"); canvas.onmousedown = mymousedown; canvas.onmouseup = mymouseup; canvas.addEventListener('touchstart',mymousedown); canvas.addEventListener('touchend',mymouseup); canvas.oncontextmenu = function (e) { e.preventDefault(); }; //壁 walls.forEach(function (w) { r = new RectangleEntity(w[0],w[1],w[2],w[3]); r.color = "gray"; engine.entities.push(r); }); lines.forEach(function (w){ r = new LineEntity(w[0],w[1],w[2],w[3], 0.8); r.color = "gray"; engine.entities.push(r); }); //釘 for (var i = 0;i < 9;i++){ for(var j = 0;j < 8 + i % 2;j++){ var x = (j * 50 + 50) - 25 * (i % 2); var r = new CircleEntity(x, i * 50 + 100, 5, BodyStatic, 1); r.color = "blue"; engine.entities.push(r); } } catcher = new RectangleEntity(0, 550, 150, 25); catcher.color = "gold"; catcher.sign = 1; engine.entities.push(catcher); //Canvas、Timer等の初期化 ctx = canvas.getContext("2d"); ctx.font = "20pt Arial"; ctx.strokeStyle = "blue"; timer = setInterval(tick,50); } function tick(){ if (isMouseDown){ offset = Math.min(offset + 5,200); } catcher.sing *= (catcher.x > 300 || catcher.x < 0) ? -1 : 1; catcher.x = catcher.x + 5 * catcher.sign; engine.step(0.01);//物理エンジンの時刻を進める repaint(); //再描画 } function mymousedown(e){ isMouseDown = true; } function mymouseup(e){ isMouseDown = false; var r = new CircleEntity(475, 400, 10, BodyDynamic); r.color = "yellow"; r.velocity.y = -offset / 5; r.onhit = function (me,peer){ if (peer == catcher){ engine.entities = engine.entities.filter(function(e){ return e != me; }); score++; } } offset = 0; engine.entities.push(r); } function repaint(){ //背景クリア ctx.fillStyle = "#006600"; ctx.fillRect(0, 0, 500, 600); //ボール、壁の描画 for(var i = 0;i < engine.entities.length;i++){ var e = engine.entities[i]; ctx.fillStyle = e.color; switch (e.shape) { case ShapeCircle: ctx.beginPath(); ctx.arc(e.x, e.y, e.radius, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); break; case ShapeRectangle: ctx.fillRect(e.x, e.y, e.w, e.h); break; case ShapeLine: ctx.beginPath(); ctx.moveTo(e.x0, e.y0); ctx.lineTo(e.x1, e.y1); ctx.stroke(); break; } } ctx.fillText("score:" + score, 200, 30); ctx.fillStyle = "yellow"; ctx.beginPath(); ctx.arc(475, 390 + offset, 10, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); ctx.fillStyle = "gray"; ctx.fillRect(455, 400 + offset, 40, 200); } </script>

試したこと

canvasのhightを600以上に増やしても描画全体が伸び、見切れたままであった。
描画したい線や短形のy座標を0に近づけてみたが、見切れたままであった。

補足情報(FW/ツールのバージョンなど)

 Tiny2D.jsは物理エンジンです。

リンク内容

こちらを参考にしています。

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

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

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

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

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

Daregada

2021/02/03 00:31

HTMLファイルの内容を省略せず、body要素の内容(に含まれるcanvas要素)も含めて質問文に記載してください。
guest

回答1

0

自己解決

body要素に記述ミスがありました。

投稿2021/02/22 16:27

mutuki

総合スコア3

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問