Canvasアニメーションの要点 - Qiita
はじめに いまさらですがHTML5 Canvasの勉強をはじめました。 Canvas APIを使ったアニメーションの実装は、jQuery animate()やcss3 keyframesといったものとは考え方が異なります。はじめて調べた時には結構戸惑ったので、同じような方のためにメモしたいと思います。 アニメーション = 再描画 Canvasでは便利なアニメーションメソッドはなく、単純に描画自体を繰り返すことでアニメーションを実現させます。イメージとしては、パラパラまんがのように画面自体が次々と差し替わっていくようなものでしょうか。 アニメーションサンプル なお↓ページで実際の動きを確認できます http://nekoneko-wanwan.github.io/demo/canvas/animation/ Canvasアニメーションの手順 ざっくりと以下のような流れになります 要素を削除
clip() メソッド - Canvasリファレンス - HTML5.JP
clip() メソッドは、非ゼロ巻数規則を使って、現在のクリッピング領域と現在のパスで描画された領域とが重なる部分を計算して、新たなクリッピング領域を生成しなければいけません。開いたサブパスは、クリッピング領域を算出するときに、暗黙に閉じられなければいけません。実際のサブパスには影響しません。新たなクリッピング領域は、現在のクリッピング領域を置き換えます。 コンテキストが初期化されるとき、クリッピング領域は、左上端が (0,0) で座標空間の幅と高さを持つ矩形にセットされなければいけません。 原文：http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-clip サンプル clip() メソッドは、呼び出される直前までに生成されたサブパスの図形で、切り取り窓がセットされると考えてください。clip() メソッドは、切り
[69-5] Canvasにグラデーションやパターン、シャドウを指定しよう
[69-5] Canvasにグラデーションやパターン、シャドウを指定しよう 最終更新日：2019年02月06日 （初回投稿日：2014年06月28日） 今回は、<canvas>上の図形にグラデーションやパターンの指定をします。 また、図形にシャドウもつけてみました。 本日のINDEX グラデーションの指定 横方向の線形グラデーション createLinearGradient(); 縦方向の線形グラデーションと途中で色を変える方法 ななめ方向の線形グラデーション 円形（放射）グラデーション createRadialGradient(); パターンの指定 キャンバスをパターンとして使う 「グリッド」もキャンバスのパターンで作っています 画像をパターンとして使う シャドウの指定 4つのプロパティでシャドウを指定する 画像にシャドウを付ける グラデーションの指定 横方向の線形グラデーション cre
![[69-5] Canvasにグラデーションやパターン、シャドウを指定しよう](https://cdn-ak-scissors.b.st-hatena.com/image/square/6d570cc49034e20d9b7d7d6682a37b47385c3895/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-52.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2F131126-1.jpg)
canvas要素の基本的な使い方まとめ
Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています．えーと，そりゃもうゴリゴリと． 本文書はsvg要素の基本的な使い方まとめの姉妹版として作成を開始した．canvas要素の仕様は現在進行中で色々と変化しているため，一筋縄で行かないが大方のapiについて書き上がったので公開する．なお，まだ使えない機能等満載だったり，内容に間違いがあっても中々検証することができないので，その部分を了承した上でご利用下さい… 更新履歴 2012/07/18 初版 1・canvas要素の概観 canvas要素とは canvas要素はhtml5で採用されたwebブラウザ上でグラフィックを描画するための機構であり，webページの機能性・視認性が重要視される昨今では，svg要素と並び重要な役割を果たしている．もともとapple社が自社製osの機能向上策として，同
canvas要素を紹介します(IE8にも対応) 【HTML5 実践編】
こんにちは、WEBマーケティング部の杉尾です。 今回はcanvas要素を紹介します。 canvasは前々回まで２回に分けて紹介したSVGと同じく、図形を描く際に使用します。 2つの違いを説明し、その後、参考ソースをご覧いただきます。 SVGについてはコチラ ⇒ ｓｖｇ要素を紹介します。IE8にも対応【HTML5 実践編】 SVGとCanvasの使い分け まず、以下の表をご覧ください。 SVGとCanvas、それぞれの特徴 ベクター形式なので、画像を拡大しても画質が悪くならない XMLベースの言語で画像オブジェクトの作成にタグを用いる オブジェクトが増えると、DOMに追加するオブジェクトが増えるのでパフォーマンスが低下ビットマップ形式なので画像を拡大すると画質が悪くなる。 Javascriptを使い、ピクセルで描画 画面が大きくなるほど描画するピクセル数も増加するためパフォーマンスが低下 高
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
setIntervalを使って、canvasで四角を連続描画 - jsdo.it - Share JavaScript, HTML5 and CSS
