「JavaScript/Canvas」の版間の差分
削除された内容 追加された内容
syntaxhighligh |
タグ: 2017年版ソースエディター |
||
3 行
== 長方形の描画 ==
<!DOCTYPE html>
<html lang='ja'>
11 ⟶ 10行目:
<canvas id="myCanvas" width="300" height="300">HTML5のCANVAS要素に対応したウェブブラウザで御覧ください。</canvas>
<script>
const
context.strokeRect(20, 30, 150, 200);
</script>
24 ⟶ 22行目:
# 今回の主役のCANVAS要素；サポートしていないウェブブラウザのケアも忘れずに<ref>https://momdo.github.io/html/dom.html#fallback-content</ref>
# JavaScriptのプログラムはSCRIPT要素の中に書きます
#* myCanvas は、CANVAS要素のElementオブジェクト
# 描画コンテキストを得ます<ref>https://momdo.github.io/html/canvas.html#dom-canvas-getcontext</ref>。今回は "2d" コンテキストタイプを使いますが他に "wgl" や "wgl2" があります
# strokeRectメソッド<ref>https://momdo.github.io/html/canvas.html#dom-context-2d-strokerect</ref>は対角の座標を与えて矩形（Rectangle）を描画します
| |||