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

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

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

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

HTML5

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

Q&A

解決済

1回答

2118閲覧

Canvas, TextBox表示されない

Kaede0902

総合スコア32

canvas

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

HTML5

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

0グッド

0クリップ

投稿2019/01/21 16:08

HTML5 Canvasでtext arrangerのサンプルプログラムを作っているのですが表示されません、どこがおかしいのでしょうか?

HTML5

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Text Arranger v1.0</title> 6 <style> 7 * { 8 background: #ddd; 9 } 10 </style> 11</head> 12<body> 13 <canvas></canvas> 14 <form> 15 Text: <input id="textBox" placeholder="Your text"> 16 <br> 17 Fill or stroke: 18 <select id="fillOrStroke"> 19 <option value="fill">fill</option> 20 <option value="stroke">stroke</option> 21 <option value="both">both</option> 22 </select> 23 <br> 24 </form> 25 26<script> // --------- 27 28const cvs = document.querySelector('canvas'); 29const c = cvs.getContext('2d'); 30const endX = cvs.width = window.innerWidth; 31const endY = cvs.height= window.innerHeight*.8; 32const midX = cvs.width /2; 33const midY = cvs.height /2; 34 35function setUp() { 36 37 var msg = 'Your text here'; 38 var fillOrStroke = 'fill'; 39 40 var formElement = 41 document.getElementById('textBox'); 42 formElement.addEventListener 43 ('keyup',textBoxChanged, false); 44 formElement = 45 document.getElementById('fillOrStroke'); 46 formElement.addEventListener 47 ('change',fillOrStrokeChanged, false); 48 49 var LeftEnd = midX/2; 50 var Top = midY/2; 51 52 c.fillStyle = '#444'; 53 c.fillRect(LeftEnd,Top,midX,midY); 54 c.strokeStyle = '#fff'; 55 c.strokeRect = (LeftEnd +10, Top +10,midX-10,midY-10); 56 c.font = '50px serif'; 57 58} setUp(); 59 60function render() { 61 var metrics = c.measureText(msg); 62 var textWidth = metrics.width; 63 var textX = midX/2 - textWidth/2; 64 var textY = midY/2; 65 66 switch (fillOrStroke) { 67 case 'fill': 68 c.fillStyle = '#f00'; 69 c.fillText(msg,textX,textY); 70 break; 71 case 'stroke': 72 c.fillStyle = '#00f'; 73 c.fillText(msg,textX,textY); 74 break; 75 case 'both': 76 c.fillStyle = '#0a0'; 77 c.strokeStyle = '#000'; 78 c.fillText(msg,textX,textY); 79 c.strokeText(msg,textX,textY); 80 break; 81 } 82 83} //render(); 84 85function textBoxChanged(e) { 86 var target = e.target; 87 msg = target.value; 88 render(); 89} 90function fillOrStrokeChanged(e) { 91 var target = e.target; 92 fillOrStroke = target.value; 93 render(); 94} 95 96 </script> 97</body> 98</html> 99

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

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

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

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

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

guest

回答1

0

ベストアンサー

セレクトボックスの値変更したら表示されるのはされますね。

ただ、どうなるのが正解なのかを書いてもらったほうが的確な回答になりやすいとは思いますが、
変数のスコープの問題が1つあるように思います。
関数の中でvarにて宣言されている場合、その中でしかその変数は生きません。

function setUp()で宣言されている下記

js

1 var msg = 'Your text here'; 2 var fillOrStroke = 'fill';

ひとまずグローバルで宣言されてはどうでしょうか。

投稿2019/01/22 00:30

m.ts10806

総合スコア80765

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

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

Kaede0902

2019/02/05 05:54

そうか!Globalにしなきゃダメですね!ありがとうございます!
m.ts10806

2019/02/05 05:55

解決された用で何よりです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問