JavaScriptプログラミング講座【キャンバス要素について（HTMLCanvasElement）】<html> <body> <canvas width="640" height="480" > 対応していません。 </canvas> </body> </html>
JavaScriptプログラミング講座【Canvas 2D Context について】
// ------------------------------------------------------------ // HTMLCanvasElement オブジェクトを作成する // ------------------------------------------------------------ var canvas = document.createElement("canvas"); // BODY のノードリストに登録する document.body.appendChild(canvas); // ------------------------------------------------------------ // CanvasRenderingContext2D オブジェクトを取得する // -----------------------------
canvas要素 + Javascriptで作る、動的コンテンツ
HTML 5 + Javascriptで作る動的なコンテンツ 前回の授業では、HTML 5について、その成り立ちや特徴を解説した上で、新しい構造化のための要素について解説しました。また、あわせてCSS3によって格段に進歩した表現力について実際にサンプルページを作りながら解説しました。 今までは、Webページで動的に図や画像やアニメーションを描画するにはFlashが代表的な選択肢でした。しかし、ここ数年でその状況が大きく動きつつあります。Flashに代表されるような動的なコンテンツが、専用のプラグイン無しに、HTMLの要素とそれと連携するスクリプトだけで実現できるようになりつつあるのです。こうした技術は、今後のWebの動向を大きく変える可能性を秘めた技術として脚光を浴びています。 HTML 5で動的に画像やアニメーションを生成するためには、canvas要素という新規に導入された要素と、can
canvas要素の基本的な使い方まとめ
canvas要素の概観 canvas要素とは canvas要素はWEBブラウザ上(クライアントサイド)で動的にグラフィックを描くための仕組みです. もともとApple社が自社製品の機能向上を目的に, WEBブラウザSafariの独自拡張として策定したものでした. が, その利便性が認識されるとMozilla(FireFox)やOpera等のブラウザベンダーも追随するようになり, HTMLにおける事実上の標準仕様として認識されるようになりました. この流れから, HTML5ではWHATWG/W3Cによって正式に仕様として取り入れられ, 現在Internet Explorerを含むほとんどのブラウザ上でcanvas要素が利用可能です. canvas要素の役割 canvas要素はグラフィックの入出力及び分析を可能とするノードです. canvas要素に描かれたグラフィックはimg要素で表示している
Canvas tutorial - MDC
このチュートリアルは、 <canvas> 要素を使用して二次元のグラフィックを描画する方法を、基本から説明します。ここでの例は、キャンバスで何ができるかを明確に示すものであり、独自のコンテンツを作成するためのコードスニペットも提供しています。 <canvas> は HTML の要素であり、スクリプト（ふつうは JavaScript）を使ってグラフィックを描くことができます。これは例えば、グラフを描いたり、写真を合成したり、簡単なアニメーションを作成したりすることができます。 <canvas> は Apple が macOS Dashboard のために WebKit に初めて導入した後、ブラウザーに実装されました。現在は、あらゆる主要ブラウザーが対応しています。 <canvas> を使うのはそれほど難しくはありませんが、 HTML と JavaScript の基本的な理解が必要です。一部の
Canvasの使い方－Canvasリファレンス
■Canvasによる描画指定の一般的な手順 Canvasでは、HTMLとJavaScriptを組み合わせて描画内容を指定します。 Canvasによる描画は、大まかに以下のような流れとなります。 HTMLで、<canvas>要素の幅と高さ、および、id名を指定する getElementByIdメソッドでHTMLと関連付けて、getContextメソッドで描画機能を有効にする canvasAPIの仕様で定められたメソッドやプロパティを使用して、具体的な描画内容を指定する ■HTMLで、<canvas>要素の幅と高さ、および、id名を指定する HTMLソース <canvas id="sample" width="400" height="300"> 図形を表示するには、canvasタグをサポートしたブラウザが必要です。 </canvas> HTMLの側では、<canvas>要素で、描画領域の幅と
canvasタグの意味と使い方
カテゴリーとコンテンツモデル 使用できる属性 height 【ハイト 】 要素の高さを指定します。値には正の整数を指定する必要があります。 width 【ウィズ 】 要素の幅を指定します。値には正の整数を指定する必要があります。 グローバル属性 すべての要素で使用できる属性です。 グローバル属性とイベントハンドラ属性 サンプルコード 以下の例ではhead要素内のscript要素で外部スクリプト（JavaScript）を読み込んでおき、それをbody要素内のcanvas要素で描画しています。 HTML <head> <meta charset="utf-8" /> <title>canvas要素 描写テスト</title> <script src="script.js"> </script> </head> <body> <p>緑枠線の正方形が描画されます。</p> <canvas id="
第17回 簡単なクラスを定義する | gihyo.jp
前回の第16回「3次元空間で座標を回す」は、星形の3次元座標をy軸で水平に回し、2次元平面に透視投影したうえでアニメーションにした（第16回コード2「星形の3次元座標に遠近法を加えてy軸で回すアニメーション」）。この表現はもうこのまま変えない。今回は、スクリプトの書き方に磨きをかける。具体的には、簡単なクラスを定義してみよう。 透視投影のメソッドをオブジェクトに定める オブジェクトをクラスからつくると、プロパティとして備わったデータをそのオブジェクトのメソッドで操作できる（IT用語辞典「クラス」参照）。今回のお題で、3次元空間座標をObjectインスタンスでつくった。これをクラスとして定義し直し、透視投影座標はそのメソッドで求めることにする。3次元空間座標のクラス（Point3D）と透視投影のメソッド（getProjetedPoint()）が定められた暁には、3次元座標のオブジェ
HTML5 Canvas 入門 - Qiita
今更ながら、Canvas をまともに勉強したことがなかったので、一からやってみました。 これまでの人生、 JavaScript は初心者の超えるべき壁をすっ飛ばして学んできたので、おさらいも兼ねて。 キャンバス上でクリックすると、その座標で図形を描画できるようになるチュートリアルです。 コードだけ見たい方はこちらを。 https://github.com/kyrieleison/canvas-tutorial/blob/master/index.html キャンバスを準備する <!DOCTYPE html> <html> <head> <title>canvas tutorial</title> <style> #canvas { background: #666; } </style> </head> <body> <canvas id="canvas" width="640" heig
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
