AndroidのCanvasを使いこなす！ - PorterDuff | PSYENCE:MEDIA
みなさんこんにちは。有山圭二です。 今年も、Google I/Oの季節がやってきました。 Google I/Oは、Google社がアメリカのサンフランシスコで開催する年次の開発者会議です。今年は5月28日と29日の二日間に予定されています。 基調講演ではGoogleの今後の方針や、新しいテクノロジー・プロダクトが発表されます。その他にも、各種テクノロジーを担当するGooglerに会って直に意見や要望を言えたり、I/Oに参加する世界中の開発者と意見が交換できるのも魅力の一つです。 今年のGoogle I/Oで何が発表されるのか、まだ不透明な部分が多いのが実際です。個人的には、Androidアプリ開発に使える新しい言語、例えばGolangやKotlinに正式対応するなどがあれば面白いなと思います。 ともあれ、この記事は引き続き、古くて新しいCanvasについてもっと知ろうと言う趣向でお送りしま
AndroidのCanvasを使いこなす！ - 基本的な描画 | Recruit Tech Blog
みなさんこんにちは。有山圭二と申します。 Android 5.0（開発コード: Lollipop）の正式版の配信が開始され、いよいよAPI Level 21とMaterial Designへの対応に本腰を入れるシーズンになりましたね。 このブログはTech Blogと言うことなので、エンジニアに向けてLollipopで追加された新しいAPIを詳解する……という企画を最初考えたのですが、きっとLollipopに関する情報は他の新しいもの好きがQiitaなどに書くと思うので、今回は思い切ってAndroidのCanvasに焦点を当てることにしました。 「Lollipopの時代にまさかのCanvas」と、驚かれる人も多いかもしれませんが、頻繁に使う機会がない分、ネット上にまとまった情報も少ないので、備忘録を兼ねている面もあります。 1.1 Canvasとは 最古のAPI Canvasは、Andro
html2canvas - Screenshots with JavaScript
<div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4> </div> html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) });
DOM オブジェクトを Canvas に描画する - HTML: HyperText Markup Language | MDN
セキュリティ上の理由から簡単ではありませんが、HTML など DOM の内容を canvas に描画することができます。この記事は Robert O'Callahan によるブログ記事をもとに、セキュアに、安全に、そして仕様に準拠したかたちでそれを実現する方法を紹介します。 概要 HTML をそのまま canvas に描画することはできません。その代わりに、描画したい内容を含む SVG 画像を利用します。描画したい HTML を含む <foreignObject> を作り、その SVG 画像を canvas に描画するのです。 描画へのステップ 唯一厄介なのが、SVG を作ることです。SVG のための XML を含んだ文字列を作り、次のものを含んだ Blob を生成することです。 "image/svg+xml" という Blob の MIME タイプ <svg> 要素 svg 要素内の <
要約: Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装がやばいという話
2012 年 9 月 26 日 追記しました。 要約エントリー。 元記事 : iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas> アップルのサイトの iPhone5 のページにある「スライドしてアンロック」のアニメーションが、信じられない実装になっている、という話。簡単に要約してみた。（ミスなどの指摘は @lowply までお願いします） もともと h.264 と WebM の動画フォーマット戦争でブラウザ互換性の問題がまだ残っている上、iPhone などは「再生ボタン」を押さないと再生できなかったりするので、こうした短いアニメーションに video タグを使うことは最適解ではなかったらしい。 そこで発想の転換をして、Retina MBP のページでは、蓋が開くたった 2
Paint : Microsoft Paint Online
Microsoft Paint is also known as MS Paint. It is a basic graphics drawing program that has been an indispensable part of all versions of the Microsoft Windows operating system. MSP provides easy ways for creating different types of graphics with different tools. The tools include brushes, shape generators, pens, and erasers. Many users of Windows might also be unaware of its presence, considering
はじめての共同作業 Canvas編 (node.js + websocket)
こんにちは、中川です。 先月無事に結婚をした開発者が一名おり、近年アシアルでは徐々に既婚者が増えてきている状況です。 ということで、結婚といえば共同作業ですよね。 今までは、一人で作業していて大変なことが色々あったと思いますが、 二人（複数）でやれば、乗り越えられることもあることでしょう。 Webアプリでも最近は、より共同作業がしやすい環境ができつつあるように思います。 そこで、今回はWebSocketを使ったリアルタイム通信でのやり取りを行い、 一緒にお絵描きができるサンプルアプリを作ってみました。 ■■■概要■■■ ・アプリ概要 ・・Canvas + WebSocket ・対応ブラウザ ・・Chrome or Safari (他、WebSocketが使えるブラウザ） ・サーバ側プログラム ・・node.js 0.2.0 ・・express@1.0.0rc2 ・・websocket-se
JavaScriptで濃度変換 - f8g
1pxごとに何らかの関数を与えて, 明るさなどを変える。セピアやグレースケールもこの類だと思います。 IronRubyのやつ http://d.hatena.ne.jp/arikui/20070918/1190050541 元画像 明るさ調整 var _f = function(n){ return function(x){ return x + n; }; }; var f = _f(50); 色調反転 var f = function(x){ return 255 - x; }; レベルスライス var f = function(x){ if(x <= 64) return 0; if(x > 191) return 0; return 128; }; 階調化 var f = function(x){ return parseInt(x / 32) * 32; }; ガンマ補正 var
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5
http://diaspar.jp/node/155