HTML＋JavaScriptだけでブラウザに図形描画 - Canvas API -
TIPS 007：キャンバスを準備する Canvas APIを利用するには、まず図形の描画先（＝キャンバス）を準備しておく必要があります。 ［リスト1］キャンバスを準備するコード（canvas.html） <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>HTML5 TIPS</title> <!--キャンバスの背景色／枠線を指定（3）--> <style> #cv { background-color: #FFF; border: 1px solid black; } </style> <script> ...中略... </script> </head> <body> <!--キャンバスの準備（1）--> <canvas id="cv" width="400" height="300"> <!--Canvas機能
MdN Design｜総合情報サイト
まずはCANVAS タグで描画するスペースのサイズを決める【1-1】。そのスペースにグラフを描画するための筆にあたるのがJavaScriptだ。getElementByIdメソッドを使いCANVASのidを取得、getContextメソッドで描画用のコンテキストを取得する。取得したコンテキストはctxというオブジェクトに格納（オブジェクト名は何でもかまわない）。このctxオブジェクトにグラフを描画していくことになる【1-2】。 【1-1】CANVASタグには、幅（width属性）と高さ（height属性）、範囲（描画領域）を指定する。またJavaScriptで使用するid属性も設定する。タグの間には非対応ブラウザ用の注意書きを入れておこう 【1-2】CANVASタグのidをgetElementByIdの引数に指定する。なお、getContext()の引数は現在では「2D」しか選択できないよ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - jekor/minform: A Minimalist JavaScript Form Enhancer
Chart.js
http://www.splashnology.com/article/15-awesome-free-javascript-charts/325/
https://csswarp.eleqtriq.com/
