Literally Canvas — Literally Canvas v0.5.2 docs - HTML5 drawing board - MS Paint in your web browser
Note Looking for a multiuser whiteboard, or want some help building a drawing-based web app? Check out Browserboard. Literally Canvas is an extensible, open source (BSD-licensed), HTML5 drawing widget. Its only dependency is React.js. You can use it to embed drawing boards in web pages. It’s kind of like an extensible MS Paint in JavaScript. Users can sketch drawings and you can do what you like w
canvas : 画像の合成方法いろいろ - WebOS Goodies
使い方がわかったところで、実際に試してみましょう。以下のサンプルでは、合成モードを変更して効果の違いを確かめられます。ついでに描画する図形（パス or ビットマップ画像）、透明度、描画色なども変更できますので、それぞれを組み合わせてどのような効果が得られるかも確認できるようにしておきました。 ※ペンギンの画像は Image * After で公開されていたものを Flickr に保存して利用しています。 ディスティネーション画像の下半分は半透明で描画しています。ただし Opera では画像に対する半透明指定は機能しません。また、透明部分が確かめやすいように背景画像を設定していますが、この背景は CSS の background-image プロパティーによるものであるため、 globalCompositeOperation の影響を受けずに描画されます。ソースは以下のようになっています（簡
うごイラについてちょっと考えてみた | らんだむけんきゅうじょ
前の記事でうごイラを保存するブックマークレットを公開しました。うごイラが特殊なもので、画像が保存できない故にブックマークレットを作ったのですが、逆に言えば、Pixivが何故このような仕組みにしたのか、気になるところです。ということで、うごイラの仕組みと、その理由を記事にしてみようかなと。（あまり知らない人向けの内容です。ここに書いてあることは割と適当なので、知ってる人はソースをみてZipImagePlayerの処理を追ってみればわかると思います。） ・うごイラの仕組み まず、作者がPixivにGifなどの画像をアップロードします。この時点でPixiv側でjpgの連番画像に変換されてZip形式で圧縮されます。うごイラのページにアクセスすると、Zipを一定の大きさに分割してダウンロードしていきます。こうすることで、すべてダウンロードされるまで待たずに、はじめの方の画像を取り出すことができます
十二章第五回 File API — JavaScript初級者から中級者になろう — uhyohyo.net
十二章第五回 File APIこのページの最終更新日：2017年10月31日 次に、Web近代史(?)中で重要な役割を果たすFile APIについて紹介します。 これはその名の通りJavaScriptからファイルを扱うためのものです。今回は特に、ローカルのファイル、すなわちページを開いた利用者のパソコン（など）の中のファイルを扱う方法について紹介します。 ただし、自由にファイルを見られてはセキュリティも何もあったものではないので、ユーザーが認めたファイルのみ見ることができるという安全仕様です。 具体的には、JavaScriptでどのファイルを読み込めるのかをユーザーに選択してもらう必要があります。実は、HTMLにはこういうのがありましたね。 <input type="file"> これはinput要素で、アップロードするファイルを選択できるコントロールです。実は、このコントロールによって選
Typed arrays - Binary data in the browser | Articles | web.dev
Typed arrays - Binary data in the browser Stay organized with collections Save and categorize content based on your preferences. Introduction Typed Arrays are a relatively recent addition to browsers, born out of the need to have an efficient way to handle binary data in WebGL. A Typed Array is a slab of memory with a typed view into it, much like how arrays work in C. Because a Typed Array is bac
HTML5 Canvasパフォーマンスチューニング
以前、HTML5 Canvasで表現する打ち上げ花火として、Canvasを使った作品をご紹介しましたが、 PC版Webkitを除く全てのブラウザ（スマホブラウザは勿論、IE9など）で重いという課題がありました。 PCブラウザに限定すれば、ブラウザやハードウェアの進化ととも改善される問題ではありますが、 スマホ（に限らず携帯端末）は2年縛りで購入するユーザーが圧倒的に多く、1・2年前の機種（環境）を使用する状況が続くことが容易に想像できます。 スマホサイトやアプリ制作を手掛けたことのある方はご存知の通り、Android2.xは色々と不都合があるだけでなく パフォーマンス面でも十分に配慮して制作する必要があります。 （Android4.xではGPUアクセラレーションがサポートされ、期待出来るのですが世代交代は先の話） そこで、本エントリーではロジックを工夫することで得られたパフォーマンス改善の
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のブラウザによって異なる微妙な振る舞いについてまとめてみた。 - 風と宇宙とプログラム
はじめに CanvasはHTML5とは切り離された独立した仕様(HTML Canvas 2D Context)になっているようですが、現状のブラウザ上でのCanvasのについて、普段はあまり気にしない微妙な振る舞いについて調べた結果をまとめてみました。 調べたブラウザの各バージョンは以下の通りです。 Firefox Chrome Safari Opera 3.6.8 6.0.490.1 dev 5.0.1 10.61 線を描く (lineTo) ただの直線を描くだけのlineToですが、その単純なものにも、恐らく、多くの人が普段は気にしないような問題があります。それは座標値とアンチエリアスです。詳しく見る前に、実際の結果を示しましょう。下記のイメージ中に描かれている線は、いずれも線幅(lineWidth)が1の線です。 (左から、Firefox, Chrome, Safari, Opera
りす穴さくら
前記事のlislis Painterについての技術的説明のまとめ。 同種のプロダクトを作成する方々の参考になれば幸いだ。 Fill Paint (Flood Paint)機能について 現在のHTML5標準では同色塗りつぶしの機能がない。 一部ブラウザの独自実装にはあるようなので、将来的には標準化される可能性が高い。 lislis Painterではどうしているかというと、ImageDataを取得して、シードフィルアルゴリズムで塗りつぶしを行っている。 これで、Chrome、FireFox、Opera、SafariのいずれでもPaint Fillが使えるようになっている。 初めは画面全体をgetImageDataして、ペイントした後にputImageDataで描き戻せばいいと思っていたけれど、これだと問題があった。 ChromeではgetImageDataして、そのままputImageDat
Sendagaya.js（仮）アウトラインメモ
Sendagaya.js（仮） に参加してきたのでメモ Sendagaya.js（仮） – Togetterまとめ 超大量絵馬とはなんだったのか – @geta6 超大量絵馬とはなんだったのか – Glide glide 超大量絵馬企画の経緯 http://10000000.pixiv.net/ の企画。 リアルタイムでお絵かきしたい要件 node.js x socket.io express backbone.marionette almond – require.js coffeescriptで書いた 1278コミット 構成 ストロークをサーバに送る Redis -> node-canvas -> 画像化 他の閲覧者に画像として表示 設計-ビューアー ビューアーは1枚のcanvas 位置に合わせて表示するものを取得してCanvasに描画しなおす url.createObject で b
Node-canvas
Node-canvas Sendagaya.js@pixiv 2014-03-19 5分で終わらなかった
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
Opera News
Opera for iOS Introducing Opera One for iOS: a fresh take on mobile browsing August 14th, 2024 We're excited to announce the launch of Opera One for iOS, our redesigned, AI-powered browser for iPhone. Opera requests that the EU General Court secure the DMA’s promise of free browser choice... July 12th, 2024 Opera is appealing the EU Commission’s decision not to designate Microsoft Edge as a gateke
Drawing semi-transparent lines on mouse movement in HTML5 canvas
I'm trying to let users specify an area by painting over it with a "paint" tool that draws semi-transparent lines on a canvas. Its purpose is specifying a "mask" for an image that will be drawn below on the canvas. This is what I tried so far: var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var canvasPos = canvas.getBoundingClientRect(); var dragging = false; dra
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
うごイラ画像変換
SketchPort
How to draw a stroke with pressure sensitive on canvas with html5/javascript?
T. Porter & T. Duff - Compositing Digital Images
HTML5 Canvas Cheat Sheet
Is there already a canvas drawing directive for AngularJS out there?