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

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

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

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

HTML

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

Q&A

1回答

1132閲覧

HTML, Selectの値がずれてしまう

Kaede0902

総合スコア32

JavaScript

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

HTML

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

0グッド

1クリップ

投稿2019/03/07 11:28

Selector でテキストのfontを変えるコードを書いているんですが、なぜか選んでいるoptionと一つずれてしまいます。いくら見直してもわからないので見てください!!!

Looks

実物
https://kaede0902.github.io/Canvas/Text/copyWriting/02.html

HTML5

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>txtArng ver2</title> 6 <link rel = 'stylesheet' href = 'style.css'> 7</head> 8<body> 9 10<canvas id="one"></canvas> 11 12 <form> 13 Text: <input id="msg" placeholder="your text"> 14 <br> 15 Write Style: 16 <select id="writeStyle"> 17 <option value="fill">fill</option> 18 <option value="stroke">stroke</option> 19 <option value="both">both</option> 20 </select> 21 <br> 22 23 Font: <select id = 'font'> 24 <option value = 'serif'>serif </option> 25 <option value = 'san-selif'>san-serif </option> 26 <option value = 'cursive'>cursive </option> 27 <option value = 'fantasy'>fantasy </option> 28 <option value = 'monospace'>monospace </option> 29 </select> 30 <br> 31 32 Size: 33 <input type = 'range' 34 id = 'size' 35 min = '0' 36 max = '200' 37 step = '1' 38 value = '50' 39 /> <br> 40 41 Color (HEX): 42 <input class = 'color' 43 id = 'color' 44 value = '#F00' 45 /> <br> 46 47 Weight: 48 <select id = 'weight'> 49 <option value = 'normal'> normal </option> 50 <option value = 'lighter'> lighter </option> 51 <option value = 'bold'> bold </option> 52 <option value = 'bolder'> bolder </option> 53 </select> <br> 54 55 Style: 56 <select id = 'style'> 57 <option value = 'normal'> normal </option> 58 <option value = 'italic'> italic </option> 59 <option value = 'oblique'> oblique </option> 60 </select> <br> 61 62 BaseLine: 63 <select id = 'baseLine'> 64 <option value = 'middle'> middle </option> 65 <option value = 'top'> top </option> 66 <option value = 'bottom'> bottom </option> 67 68 <option value = 'hanging'> hanging </option> 69 <option value = 'alphabetic'> alphabetic </option> 70 <option value = 'ideographic'> ideographic </option> 71 </select> <br> 72 73 Align: 74 <select id = 'align'> 75 <option value = 'center'> center </option> 76 <option value = 'left'> left </option> 77 <option value = 'right'> right </option> 78 79 <option value = 'start'> start </option> 80 <option value = 'end'> end </option> 81 </select> <br> 82 83 84 85 </form> 86 87 88<script> 89 90 const cvs = document.querySelector('canvas') 91 const c = cvs.getContext('2d'); 92 cvs.width = window.innerWidth/ 2.5; 93 94 var msg = 'sample'; 95 var writeStyle = 'fill'; 96 97 let font = 'serif'; 98 let size = '80'; 99 let weight = 'normal'; 100 let style = 'normal'; 101 102 let color = '#f00'; 103 let baseLine = 'middle'; 104 let align = 'center'; 105 106 107// msg, writeStyle, 108// font, size, weight, style, 109// color, baseLine, align, 110 111 var formElement 112 = document.getElementById('msg'); 113 formElement.addEventListener('keyup', msgChng, false); 114 115 formElement 116 = document.getElementById('writeStyle').addEventListener 117 ('change', writeStyleChng, false); 118 119 120 formElement 121 = document.getElementById('font').addEventListener 122 ('change', fontChng, false); 123 formElement = 124 document.getElementById('size').addEventListener 125 ('change', sizeChng, false); 126 formElement = 127 document.getElementById('weight').addEventListener 128 ('change', weightChng, false); 129 formElement = 130 document.getElementById('style').addEventListener 131 ('change', styleChng, false); 132 133 134 formElement = 135 document.getElementById('color').addEventListener 136 ('change', colorChng, false); 137 formElement = 138 document.getElementById('baseLine').addEventListener 139 ('change', baseLineChng, false); 140 formElement = 141 document.getElementById('align').addEventListener 142 ('change', alignChng, false); 143 144 145 drawScreen(); 146 147 148 149 150 function drawScreen() { 151 let w = cvs.width; 152 let h = cvs.height; 153 let mgn = 10; 154 155 c.fillStyle = '#ffa'; 156 c.fillRect(0,0,w,h); 157 158 c.strokeStyle = '#000'; 159 c.strokeRect 160 (mgn/2,mgn/2,w-mgn,h-mgn); 161 162 // ======== fontCh =========== 163 c.font = 164 weight + ' ' + 165 style + ' ' + 166 size + 'px '+ 167 font + ' ' ; 168 // ======== base lines =========== 169 c.textBaseline = baseLine; 170 c.textAlign = align; 171 172 var x = w/2; 173 var y = h/2; 174 175 c.fillStyle = c.strokeStyle = color; 176 switch(writeStyle) { // --------------------- 177 case 'fill': 178 c.fillText(msg,x,y); 179 break; 180 case 'stroke': 181 c.strokeText(msg,x,y); 182 break; 183 case 'both': 184 c.strokeText(msg,x,y); 185 c.fillText(msg,x,y); 186 break; 187 } 188 } 189 function msgChng(e) { 190 msg = e.target.value; 191 console.log('target',e.target); 192 drawScreen(); 193 } 194 function writeStyleChng(e) { 195 writeStyle = e.target.value; 196 console.log('target',e.target); 197 drawScreen(); 198 } 199 200 201 function fontChng(e) { 202 font = e.target.value; 203 console.log('target',e.target); 204 console.log('font:',c.font); 205 drawScreen(); 206 } 207 function sizeChng(e) { 208 size = e.target.value; 209 console.log('target',e.target); 210 console.log('font:',c.font); 211 drawScreen(); 212 } 213 function weightChng(e) { 214 weight = e.target.value; 215 console.log('target',e.target); 216 console.log('font:',c.font); 217 drawScreen(); 218 } 219 function styleChng(e) { 220 style = e.target.value; 221 console.log('target',e.target); 222 console.log('font:',c.font); 223 drawScreen(); 224 } 225 226 227 function colorChng(e) { 228 color = e.target.value; 229 console.log('target',e.target); 230 drawScreen(); 231 } 232 function baseLineChng(e) { 233 baseLine = e.target.value; 234 console.log('target',e.target); 235 drawScreen(); 236 } 237 function alignChng(e) { 238 align = e.target.value; 239 console.log('target',e.target); 240 drawScreen(); 241 } 242 243</script> 244 245 246 247 248</body> 249</html> 250 251 252よろしくお願い申し上げます。

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

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

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

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

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

cerfweb

2019/03/13 14:08

san-selifじゃなくてsans-serifですよ。 x_xさんの回答で合っていると思いますが、解決済みでしたら解決済みとしてください。
guest

回答1

0

console に出力している内容のことであれば、drawScreen()で設定を変えているので、呼ぶ前はまだ変わっていない一つ前の状態では?

JavaScript

1 function fontChng(e) { 2 font = e.target.value; 3 console.log('target',e.target); 4 console.log('font:',c.font); // 変更前の値 5 drawScreen(); 6 }

投稿2019/03/07 13:17

x_x

総合スコア13749

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問