javascript配列でHTML5のcanvasに図形を描画する方法 - OKWAVE
なんてことない小手先ですが ◎方法１：単に短くする var rects = [{ s: "rgba(0,0,0,1)", r: [20, 10, 10, 10] }, { s: "rgba(0,0,0,1)", r: [20, 10, 10, 10] }, (略) ]; for (var i = 0; i < rects.length; ++i) { ctx.fillStyle = rects[i].s; ctx.fillRect.apply(ctx, rects[i].r); } ◎方法２：配列にする var rects = [ ["rgba(0,0,0,1)", [20, 10, 10, 10]], ["rgba(0,0,0,1)", [20, 10, 10, 10]] ]; for (var i = 0; i < rects.length; ++i) { ctx.fillStyle
CANVASでのイベント（クリック、キー操作等）処理
トップページ→プログラミング技術等→CANVAS要素（HTML5）（導入）→ CANVASでのイベント（クリック、キー操作等）処理を行うJavaScriptの例を挙げる。 「上記のHTMLをブラウザで開く」を閲覧する際は、Google Chrome等を使用してください（IE8以前では表示されない）。 クリックされた位置に画像を貼る この場合、画面コンテクストではなく、canvasに対するaddEventListenerプロパティで設定する。 このプロパティの引数の'click'は、クリック処理を示し、その次の引数にクリックで呼び出される関数名を記述する。次の引数にはtrueと書いておく。 クリックされた時のカーソルの位置は、呼び出される関数に渡されるeventのプロパティclientX、clientYで其々x座標、y座標が得られる。 但し、これはbody全体の左上端からの座標となる。htm
canvas要素 + Javascriptで作る、動的コンテンツ
HTML 5 + Javascriptで作る動的なコンテンツ 前回の授業では、HTML 5について、その成り立ちや特徴を解説した上で、新しい構造化のための要素について解説しました。また、あわせてCSS3によって格段に進歩した表現力について実際にサンプルページを作りながら解説しました。 今までは、Webページで動的に図や画像やアニメーションを描画するにはFlashが代表的な選択肢でした。しかし、ここ数年でその状況が大きく動きつつあります。Flashに代表されるような動的なコンテンツが、専用のプラグイン無しに、HTMLの要素とそれと連携するスクリプトだけで実現できるようになりつつあるのです。こうした技術は、今後のWebの動向を大きく変える可能性を秘めた技術として脚光を浴びています。 HTML 5で動的に画像やアニメーションを生成するためには、canvas要素という新規に導入された要素と、can
)
クイック スタート: キャンバスへの描画 (HTML) - Windows app development
このブラウザーはサポートされなくなりました。 Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。 [ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください] キャンバス要素は、ページ上に四角形のビットマップ キャンバスを作成します。このキャンバスには、JavaScript を使って簡単にグラフィック イメージを描画できます。キャンバスは、ゲームを作成するときや、グラフィックスをリアルタイムで生成したり一定の間隔で変更したりするような状況で役立ちます。 このクイック スタートは次のセクションで構成されます。 必要条件 キャ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
