)
Sampling image colors with Canvas (Windows)
This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support. Create your own eyedropper effect to extract colors from a drawing or photograph using HTML5 canvas methods. Introduction Sampling colors from an image can add interest and flexibility to websites such as a fashion site or home decorating site. Users can
HTML5のCanvasに描かれる「アートスクリプティング」とにかく美しいJavaScript表現のまとめ28個！
動くぞ！きれいだぞ！ ﾍ(･_･ﾍ) とにかく痩せたい、HTMLファイ部のほんだです。 jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアを担当している者です。 jsdo.it、ユーザー数 5万人突破！ 手前味噌ですが、このたび弊社運営のHTML5コード共有コミュニティ「jsdo.it」が、 ユーザー数 5万人を突破しました！（わーい！） 今回の記事では、jsdo.itのユーザー5万人を記念して、 HTML5 Canvas に芸術的な動きを表現しているJavaScriptコード「アートスクリプティング」を特集します！ あまり一般的ではないようですが、「アートスクリプティング」という言葉でくくってみました。 Canvasアートスクリプティング特集！ 説明不要！ 気になったコードは是非のぞいてみてください！
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
HTML5のCanvasに欠けているもの：フレームワーク － ＠IT
OSSプロジェクトのホスティングサイト「GitHub.com」では、Flashで実装されていた一部のUIをCanvasに移行したという HTML5のCanvasとFlashの最大の違いは、アニメーションなどを行うために利用できる抽象レベルだ――。こう指摘するのは、Gitベースのコードホスティングサービス「GitHub.com」の共同創業者、Tom Preston-Werner氏だ（ちなみにWerner氏はマイクロソフトに買収された検索ベンチャー「Powerset」の元社員で、買収直後に“サラリー以外に3年間で30万ドル（約2770万円）”というおいしいオファーを断ってまでGitHub.comのフルタイム開発の道を選んだことでも知られている）。 Flashで書かれた一部のUIを全面的にCanvasで書き直した経験からWerner氏は、Canvasにはまだ抽象度の高いフレーワムワークが欠けてい
iPhoneでcanvasに描画するサンプル - 強火で進め
iPhoneのSafariでcanvasタグに描画するサンプルを作ってみました。 iPhoneでcanvasに描画 http://tsuyobi.heteml.jp/html/iphone/canvas/ ざっくりと重要な処理の部分のみ解説。 メタタグで画面の拡大縮小のリミットを1.0倍に設定→ピンチによる拡大、縮小の抑止 <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, width=device-width"> body部分でのtouchstartの動作を抑止→canvas以外の部分をスクロールして、離したときにウィンドウがバウンドする動作を抑止 document.body.ontouchstart = function(e) { e.preventDefault
HTML5 canvasでマウス追従するヨーヨーみたいな動き « SMART LAB
スマートフォン,smart phone,Windows7,iPhone,Android,iPadお祭りなんかでヨーヨー釣りありますよね。水風船にゴムをくっつけて遊ぶあれ。 あのヨーヨーの動きを canvas でやってみたいと思います。 ヨーヨー風サンプル ※canvasタグ対応ブラウザで確認できます。 どうでしょう。ゴムの感じもそれっぽく再現できてるのではないかと思います。 window.addEventListener('mousemove', function(e) { mouseX = e.pageX; mouseY = e.pageY; }, false) mouseX / mouseY というのは取得したマウス座標を格納しておく変数です。 mousemoveイベントが送出されるたび（= マウスが動くたび）に更新されます。 canvas = document.getEl
MXML のコンポーネントの特性を利用しよう | _level0 - KAYAC Front Engineer Blog
海賊王をめざす男 マツです。こんにちは。 今年こそは覇王色の覇気をまとってみたい！今年もよろしくお願いします。 MXML のコンポーネントの特性を上手に利用することで、ぐっと制作に幅が広がります。 HBox、VBox コンポーネントを例にしてみましょう。 HBox の H は、horizon（水平） VBox の V は、vertical（垂直） それぞれにカスタムコンポーネントを addChild してみます。 BoxComponent.mxml カスタムコンポーネント <?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Box width="100" height="100" backgroundColor="#aaaaaa"/> <mx:Tex
IO 9elements
Responsive bar charts in HTML and CSSBuilding flexible data visualizations for international sites Speed vs. Duration - A use case for mixed unit divisionLearn how to solve the CSS animation challenge of varying speeds across different screen sizes. This post introduces a technique using atan2() and tan() for unitless viewport width calculations and provides practical examples.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mindreader – Home
Sketchpad - Draw, Create, Share!
Sketchpad
Canvas Cycle: True 8-bit Color Cycling with HTML5