タグ

関連タグで絞り込む (13)

タグの絞り込みを解除

canvasに関するkoroharoのブックマーク (9)

  • JavaScriptで写真を撮りたい（・８・） - Qiita

    ブラウザで写真が撮れたらなぁという場面に出くわしたので、APIを確認したところ、navigator.getUserMedia()は非推奨で、今度からはnavigator.mediaDevices.getUserMedia()を使うようにとのこと 音声、画像をキャプチャするMedia Capture and Streams APIでスナップショットを撮ってみました。 ソースコード ガワの準備 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MediaDevices.getUserMedia()</title> </head> <body> <button onclick="startVideo()">ビデオ開始！</button> <button onclick="stopVideo()">ビデオ終了！</button>

    JavaScriptで写真を撮りたい（・８・） - Qiita

  • HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA

    スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか？　近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA（シングルページアプリケーション）など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。

    HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA
    koroharo
    koroharo 2013/05/29
    『Appleがアプリ市場のためにブラウザでのリッチコンテンツ(ゲーム等)を牽制しているとよく言われます。しかしAppleのデバイスがもっともブラウザの描画パフォーマンスが良く、この矛盾している事実は興味深い...』
    リンク

  • これはすごい！ゲーム開発に最適な高性能JavaScriptアニメーションフレームワーク「CAAT」 - Chrome Life


    前回の記事で、200行で作れるHTML5製テトリスをご紹介してたくさんの反響がありました。 誰もが知っているゲームを少ないコードで実現していることと、コードが読みやすくてプログラミングのスキルアップに役立つということで関心をもたれたと思います。 これを機会に自分でもゲームを作ってみたいと思った方もいるのではないでしょうか？筆者もそのうちの一人です。 しかし、フルスクラッチで作るとなるとそれなりに経験が必要ですし、高度な動きを実現するにはどうやって作れば良いのかも分かりません。 そこで今回ご紹介するのは、ゲーム作りに最適な、高性能JavaScriptアニメーションフレームワーク﹁CAAT﹂です。︵CAATは、Canvas Advanced Animation Tookitの略︶ ﹁CAAT﹂は完全なゲームフレームワークとして様々な機能が提供されています。 CAATの機能と特徴 オンスクリーン

  • 5509.me

    This domain may be for sale!

    koroharo
    koroharo 2011/12/01
    [javascript[animation]
    リンク

  • JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」:phpspot開発日誌


    html2canvas - screenshots withJavaScript JavaScriptでスクリーンショットが取れるライブラリ﹁html2canvas﹂ サーバサイドでブラウザを動かしてスクリーンショットを取るというより、利用者のブラウザ上でスクリーンショットをJavaScriptとcanvasを使って生成しちゃおうというものらしいです。 canvas非搭載ブラウザはflashcanvasやExplorerCanvas等の代替が必要とのこと。 html2canvasでレンダリングされたサンプルも見ることが出来ます。 frameやobjectのサポートはしていない点に注意。 スクリーンショットを取る仕組みをサーバに仕込むとタイムラグがあったりサーバ側は大変だったりで色々問題点を抱えていますが、クライアント側でやれば画像を受け取るだけでいいので便利です。 クライアントごとの表示

  • DeviantArt muro

    Last Autosave: never New Canvas... Open File... Save File As... Export Image Import Image As Layer Resize Image Save and Exit to Sta.sh Cut Copy Paste Select All Select Inverse Select by Color Expand Selection Contract Selection Feather Selection Deselect Crop to Selection Clear Canvas Reset Brushes Flip Canvas Horizontally Flip Canvas Vertically

    DeviantArt muro
    koroharo
    koroharo 2010/08/12
    ブラシ、フィルタ、レイヤを備えたHTML5のドローツール。よくできてるなぁ。
    リンク

  • HTML5入門：アニメーションの実装方法３種


    HTML5・CSS3のような新しい技術の問題点は、HTML4やらFlashなどの枯れた技術と違ってノウハウ・ライブラリ・ツールとかがまだ十分にそろっていない事。普及のタイミングもまだはっきりとしていないこの段階で手を出せない・出しにくいと感じている人が多いのも良く理解できる。 私から見れば、逆に﹁こんな楽しい状況は滅多にない﹂わけで、商売になるかならないかは二の次にしていろいろと試したくなる。 今日作ったのは、HTML5+CSS3上で可能になる︵ただし現在ではWebkit独自の拡張を含む︶3つのアニメーション・テクニックの比較︵左に貼付けたものがそれ、Safari/Chromiumだとすべて動く。Firefox/OperaだとDOMとCanvasのみ︵ただし別ウィンドウで開かないとCanvasが動かないークロス・ドメインセキュリティのバグか？︶︶。 詳しくはソース︵参照︶を見ていただければ

  • Canvas tutorial - MDC


    このチュートリアルは、 <canvas> 要素を使用して二次元のグラフィックを描画する方法を、基本から説明します。ここでの例は、キャンバスで何ができるかを明確に示すものであり、独自のコンテンツを作成するためのコードスニペットも提供しています。 <canvas> は HTML の要素であり、スクリプト︵ふつうは JavaScript︶を使ってグラフィックを描くことができます。これは例えば、グラフを描いたり、写真を合成したり、簡単なアニメーションを作成したりすることができます。 <canvas> は Apple が macOS Dashboard のために WebKit に初めて導入した後、ブラウザーに実装されました。現在は、あらゆる主要ブラウザーが対応しています。 <canvas> を使うのはそれほど難しくはありませんが、 HTML と JavaScript の基本的な理解が必要です。一部の
    Canvas tutorial - MDC

  • JavaScriptで図形を描くHTML要素「Canvas」の実例


    JavaScriptを使ったAJAXが昨年前半まで大いに注目を集めていましたが、その根本になったJavaScript自体は古くからあり、AJAXというのは新しい応用法みたいな側面が非常に強かったのが特徴です。 しかし今回紹介する﹁Canvas﹂要素はそういうのとは明らかに一線を画しています。グラフの描画、写真合成、アニメーションなどが可能で、実際にはMac OS X のDashboardに初導入されています。そのため、サポートしているブラウザはSafariとFirefox 1.5以降のGecko1.8ベースのブラウザ、それからOpera9となります。また、この﹁Canvas﹂要素は﹁HTML5﹂としても知られるWhatWG Web applications 1.0仕様の一部でもあるそうです。 といろいろ書いても実感がわかないと思うので、いろいろな実例を見てみましょう。 まずは簡単なフレー
    JavaScriptで図形を描くHTML要素「Canvas」の実例
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.