createImageData, getImageData, putImageData メソッド - Canvasリファレンス - HTML5.JP
構文 imagedata = context . createImageData(sw, sh) CSS ピクセルで指定された寸法の ImageData オブジェクトを返します（その寸法は、そのオブジェクトからアクセスできる実際のデバイスのピクセルとは異なる数に対応付けられるかもしれません）。返されたオブジェクトにあるすべてのピクセルは、透明な黒となります。 imagedata = context . createImageData(imagedata) 引数と同じ寸法となる ImageData オブジェクトを返します。返されるオブジェクトのすべてのピクセルは透明な黒となります。 引数が null なら、NOT_SUPPORTED_ERR 例外を投げます。 imagedata = context . getImageData(sx, sy, sw, sh) canvas の指定の矩形に対す
setInterval/JavaScriptリファレンス
JavaScript Reference setInterval 関連オブジェクト : window、Frame タイプ : メソッド 書式 変数(省略可) = setInterval(関数名,ミリ秒) サンプル <body onload="setInterval(myTimer,1000)"> 指定した時間毎に繰り返し処理をするタイマーを設定します。このメソッドで指定したタイマーは、clearInterval()メソッドを実行しない限り解除されることがありません。 このメソッドのサンプルは、JavaScript入門の ストップウォッチを参照してください。 Top / Home / Index / Next
fillRect() メソッド - Canvasリファレンス - HTML5.JP
構文 context . fillRect(x, y, w, h) canvas 上の指定の矩形を、現在の塗りつぶしスタイルを使って、塗りつぶします。 仕様 矩形をビットマップに即座に描画するメソッドが 3 つあります。それぞれ 4 つの引数をとります。最初の 2 つには、矩形の左上端の x 座標と y 座標を与えます。次の 2 つには、矩形の幅 w と 高さ h を与えます。 現在の変形マトリックスは、次の 4 つの座標に適用されなければけません。これらの座標は、指定された矩形を取得するために閉じられるパスを形成します: (x, y), (x+w, y), (x+w, y+h), (x, y+h)。 現在のパスに影響を与えることなく、形状が描画されます。そして、この形状は、クリッピング領域の対象となります。clearRect()は除きますが、シャドー効果、グローバル・アルファ、グローバル
HTML5 Canvasでシューティングっぽいもの - juntkの日記
http://www.geocities.jp/psipage/html5/html5_canvas_shot.html 書いてみた。 boxの上半分にターゲットが現れ、下半分をクリックで弾を発射。 パラメータの値をいじると面白いかも。 context.shadowBlurについて contextに影（ぼかし）を入れるためにshadowBlurを適用したら処理が重くなった。対応してるブラウザも少ない。 shadowBlur プロパティ - Canvasリファレンス - HTML5.JP 気になったこと マウスの座標はキャンバスからの相対位置ではなく絶対位置。なのでCanvas領域の上にバナー広告などが入ることを想定すると、相対位置で考えると思い通りに動かない（ことがあるかも）。とりあえずCanvas領域の位置は絶対配置で指定した。 <canvas id="canvassample" wid
HTML5の Canvasで動くものを作ってみた
前回のHTML5の Canvasを使ってみたにて単純な三角形を作ってみました。 ただの三角形だとつまらないので、この三角形を動くようにしてみました！ 三角形を動かす仕組みは、setIntervalを使って数秒おきに図形を描いています。 ただーし、図形を描くだけならすぐに出来るのですが、図形を消す方法がわからなかった。 ので、調べました！ context.clearRect(x,y,w,h)を使います！ 消す方法はこれしか無いようです。 この関数の引数に消す範囲を渡します。そうすると、その範囲内の図形が消されます。 ・ただ、三角形がウニョウニョ動くだけのソースです ・ブラウザが対応していれば、下記リンクから見れます サンプル
ASCII.jp：HTML5のCanvasで作る、Flash不要のお絵かきツール｜古籏一浩のJavaScriptラボ
HTML5 Canvasで作った「シンプルペイント」。ペンの色とサイズが選べ、保存もできる。画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） HTML5の新機能で特に注目を集めているのが、Flashなどのプラグインを使わずにWebブラウザー上でグラフィックを描画できる「Canvas」です。Canvasは、すでにInternet Explorer（IE）をのぞく、ほとんどのブラウザーに実装されていますし、マイクロソフトは現在開発を進めている「IE9」でHTML5を積極的にサポートするとしていますから、IE9にCanvasが実装される可能性は高そうです（ただし、現在公開されているPlatform Preview版ではCanvasは実装されていません）。すべての主要ブラウザーでCanvasが利用できるようになれば、画像処理を伴うWebア
canvasで簡単なお絵かきをしてみたメモ - 超自己満足プログラミング
タイトルのまんまです。 Firefox/Chromeあたりで動きます。 デモページ html canvasを用意しとくだけです。 canvas内の座標を取るときに、layerX/Y で取りたいので、styleにposition:relativeを当てておきます。 (positionが当たってないと、layerX/Yは pageX/Y の値と等しくなるらしいので。 positionを当てたくないなら、pageX/Yからcanvasのオフセットを引いたりすることになるんでしょうか。) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <canvas id="c" style="position:relative; border:3px solid #999" width="600" height="480">
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
1ka2ka.com