Rough.js
Create graphics with a hand-drawn, sketchy, appearance Rough.js is a small (<9kB gzipped) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths. Rough.js works with both Canvas and SVG. Install Install from npm: npm install --save roughjs And use it in
JavaScriptで画像から色を取り出す | 12px.com
前回の記事の ドロネー三角形分割 のスクリプトが気に入ったのでブログのヘッダに使ってみました。 単に画面上に置くだけでも良かったのですが、記事に合う色合いになったら良いなーと思ったので、ページ毎に使っている画像から色を取得して描画するようにしてみました。 Wordpressは簡単な設定でアイキャッチ画像を設定できるので、それを使用して画像を投稿しています。テンプレートにはwp_get_attachment_image_srcとget_post_thumbnail_idを使用してパスだけを読み込むように設定しておいて、それをjsに渡し、js内で画像をロードし、非表示のまま画像から色だけを取り出して、それをcanvasに描画する時に使っています。 で、画像から色をとるのがASみたいに簡単にできなくて、ちょっと回りくどい方法になってしまったのでメモ。 まずは見えないcanvasを作成して、 ca
Canvas + web workersを利用して、画像からカラーパターンを自動作成してみる | rokuro Fire
※ 前の記事（自動カラー選択ボタン（β版）のテストを開始しました）のつづき。 canvasに表示した画像から、カラーパターンを作成するスクリプトを書いてみました。処理にweb workersを利用しています。 DEMOサイト Auto ColorPicker β – rokuro fire 処理の流れ canvasで画像を読み込み、全ピクセルデータを取得 workerを作成し、ピクセルデータをworkerに渡す workerで、色取得の処理を行う workerから、取得した色データを返す UIスレッドでの処理 下記2つの処理はUIスレッド側に書きます。 canvasで画像を読み込み、全ピクセルデータを取得 workerを作成し、ピクセルデータをworkerに渡す // canvasで画像を読み込み、全ピクセルデータを取得 // canvasにはdrawImage済とする var pixel
[HTML5] - 個人事業主のつぶやき
http://pluswing.net/html5/canvas.html ということで、テトリスを実装してみた。 テトリス自体(tetris.js)は小一時間でてきとーに実装したので、 ブロックの回転とかが微妙な感じ。 ※FirefoxはCanvasがもっさりしてるので、Chromeでプレイすることをオススメします。 それは置いておいて、なんでHTML5のCanvasを使おうかと思ったのかというと、 ChromeのCanvasが恐ろしく速いという事実。*1 これは、ゲームが作れるぞ！という興奮から。 (僕がゲームを作ってたのは7年ほど前になるけど、 その頃のそこらにあるマシン並に速度出てそうな勢い。Chromeは。) 実はテトリスは副産物で、 Canvasを使うにあたり、ライブラリが無いとねー ということで、描画周りのライブラリをひととおり作りました。 一個くらい作ってみないとライブラリ
![[HTML5] - 個人事業主のつぶやき](https://cdn-ak-scissors.b.st-hatena.com/image/square/404ce996d745470d6733edb655b9495b03108562/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F04eb5f21995bc2ea37ed68294e1fc28d804411f8%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Ft%252Ftoshiyuki_saito%252F20100312%252F20100312003029.png)
今更聞けないcanvasの基礎の基礎 - KAYAC Engineers' Blog
はじめまして。新入りのnagataです。 入社式で自転車乗ってた野郎です。 先輩方から「ブログ、書いてね！」とのお達しがあったので、 日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Firefox3.6.3、Chrome5.0で動作を確認しています。 canvasってなんぞ？ 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 とりあえずつかってみる 早速何か描いてみましょう。 こういうことは実践あるのみです。 処理にはJavascriptを使います。 canvasに描画を行うときは、canvas要素からcontextを取得して、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
