ImageMagick の Canvas / Page について - Qiita
はじめに PNG や GIF 画像で identify を実行すると、よく分からない座標が表示される件です。JPEG では問題になりません。 なお、このエントリは実質 +repage の紹介記事となります。 % identify crop.png crop.png PNG 200x200 640x480+100+100 8-bit sRGB 183c 4344B 0.000u 0:00.000 ImageMagick はこの 640x480 を (Layer) Canvas サイズ、200x200 は (Image) Page サイズと呼びます。 (canvas は書き込み作業途中の image データを表す事もあって多義的なので注意) Canvas / Page のイメージ図 ImageMagick で crop を繰り返すと意図しない動きをしたり、GIF アニメーションの resize
ユーザーが操作できるようになるCanvasライブラリ「Fabric.js」 |
HTML5のCanvasに追加された図形などをユーザーが操作可能にする 「Fabric.js」というライブラリを紹介します。 この記事はある程度Canvasの知識がある方を対象に構成しています。 Fabric.jsの特徴 Canvas操作の簡略化やアニメーション機能など基本的な機能以外に、 下記の他ライブラリには見られない機能があります。 Canvasは通常、図形などを描画してしまうとCanvas上の絵として 扱われてしまい、図形としては扱えません。 Fabric.jsを使用すると、Canvasに描画した図形や画像、テキスト (以後オブジェクト)はFabric.jsによって個別に管理され、 ユーザーがハンドルで操作できるようになります。 ※ハンドルとはオブジェクトの周りに表示される、操作点の事です。 オブジェクトの操作について 操作性はMicrosoft Officeの図形操作に近いです。
Canvasの「ブレンドモード」と「toDataURL」を利用した画像の重なりを判定する処理 - Qiita
iOS/Androidのスマートフォン向けのWebアプリケーションにおいて、 画像を合成した際に合成した画像同士が重なっているかをチェックする必要があり Canvasを利用すれば出来そうだと思ったため、その時の実装メモとして記載しておきます。 前提条件 必要なパーツの画像を合成して表示するWebのシステム 着せ替えゲームをイメージして頂ければと... 各パーツは全て同じサイズの画像で書き出しがされている 各パーツの描画位置については、画像に描画されている位置 左上を基点として画像を合成すれば基本的には綺麗に合成される 描画されているパーツ以外の余白部分は透過である 画像のイメージ 上記のように同じ画像サイズではあるが、 各パーツの表示位置や大きさなどは画像の中に埋め込みで描画されている。 （※ 画像はあくまでイメージです） このようなパーツの画像を合成し表示するシステムがある。 やりたいこ
canvasの図形を画像として出力する時のブラウザ毎の処理 - Qiita
canvasに描かれた図形を画像として出力する方法としてデータURIスキームの方法もありますがBlobを使用した出力方法もあるので、それぞれのブラウザ毎に出力を分けてローカルに保存できるようにしてみます。 canvasの図形を画像出力する 既に何か描かれているcanvas要素から画像を出力するコードです。 var // canvas要素 canvas = document.querySelector('#canvas'), // 出力した画像を表示するimg要素 image = document.querySelector('#outputImg'), // 画像のダウンロードリンク link = document.querySelector('#downloadLink'), blob, imageURL; // リンクにdownload属性を設定 link.download = 'ca
平面の絵を3次元にするアプリ『Mental Canvas』がスゴい「不思議な感覚になる、漫画が動かせるぞ」
木炭 @sumininaruyo Mental Canvas on Surface Studio with Surface Dial youtu.be/53KJerdHkdA @YouTubeさんから ファッ！？どうなっとるんやこれ・・・ 2017-03-02 12:17:34 リンク YouTube Mental Canvas on Surface Studio with Surface Dial Check out the latest from Mental Canvas with brand new features using Surface Studio and Surface Dial. 1 user 324
描画面を回転させる-HTML5編
描画面を回転させる命令文 文字や画像を回転させる命令は以下のものです。 context.rotate(回転角度) 描画面を回転させます。回転角度はラジアンで指定。 前にも出てきたラジアンです。πが180°だったので、π/2が90°、 π/3が60°ということになります。 文字を回転させる では、以下のスクリプトで、文字を45°回転させてみましょう。 <canvas id="cv1" width="360" height="240"></canvas> <script> var ctx = document.getElementById("cv1").getContext("2d"); ctx.font = "normal 40px Arial"; ctx.textBaseline = "bottom"; ctx.fillStyle = "red"; ctx.fillText("JavaSc
JavaScriptでシンプルに始めるクリエイティブコーディングその1 - Qiita
クリエイティブコーディングとは アートやデザインなど可視化表現のためのコーディング技法のことです。 巷に存在するコーディング環境としてはWebGLやProcessing, openFrameworksまたはArduino等が挙げられます。 これらは、現在メディアアートを始め、広告やエンターテイメントといった様々な形で人々の目に触れるようになってきています。 この記事で何をやるか かなり原始的なところから始めようと思います。ですので、複数回に渡って、技法を紹介していこうと考えています。 表現を実現するためにHTML5で追加された、2Dのグラフィックスを描く<canvas>要素を利用します。 「円を描いて、それを移動させる」 初回はシンプルで、円の移動のみやります。 円の描画 canvasをつかって円を描画するのは、以下のコードで実現できます。（最初はコピペでも動くように、html全体を記載し
Canvasで実装するシンプルなローディング画面3パターン - Qiita
はじめに 読み込みに時間が掛かるようなコンテンツの場合、エラーでは無く読み込み中ということをユーザーに伝えるため、ローディング画面（スプラッシュ画面）を用意することはよくあるかと思います。 gifアニメーションで意図を伝えるのも良いと思いますが、できることならその読み込み状況を合わせて表示させると、よりフレンドリーかと思います。 今回はCanvasを使用して、シンプルな3種類のローディング画面を作成してみました。3種類とは単に思いついただけのものですが、基本的にはこれらの応用で色々なローディング画面を作成できるかと思います。 実際の動きは↓ページで確認ができます http://nekoneko-wanwan.github.io/demo/canvas/loading/ 使用したライブラリ preloadJS CreateJSのモジュールの一つで、色々なファイルの読み込み率が取得可能 ※なお
HTMLをCanvasにして画像としてダウンロードできるようにする
Result スニペットとは言えませんが・・ｗ html2canvasとjQueryを使ってCanvas化、ダウンロード出来るようにするコード。tableとかグラフをユーザーがダウンロード出来るようにする、みたいなの。 jQueryjQueryに加えてhtml2canvas.jsを読み込み。サンプルではCDNを使ってます。 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>jQuery var element = $("#html-content-holder"); // 画像化したい要素をセレクタに指定 var getCanvas; //プレビュー $("#btn-Preview-Image").on('click', function () { h
HTML5 CanvasとiPadで実現する3Dホログラム - ICS MEDIA
みなさんは「3Dホログラム」をご存知でしょうか？ 空間に映像を投影するというもので、スター・ウォーズなどSFのイメージがあるかもしれませんが、近年ではTIFFANYのプロモーションやマイケル・ジャクソンのライブなどでも使用されている技術です。 近未来感のある技術ですが、スマートフォンとCDケースで簡易的なものが自作できると2015年夏に話題になりました。これはCDケースの透明なプラスチック板を使って投影機を作成し、スマートフォンの画面の上に設置し、専用の動画を再生して投影するものです。 週末に子供と遊ぶネタにちょうどいいなと私も作ってみようと思ったので、投影する映像をHTML5 Canvasで実現してみました。 投影機の作成 投影機は、台形型（上辺1：下辺6：高さ3.5の比率）の透明な板を4枚組み合わせて作成します。今回はiPadのサイズに合わせて、「2.5cm × 14.8cm × 8.
Canvasを使ったMaterialアバター実装jQueryプラグイン「material-avatar」:phpspot開発日誌
GitHub - hellsan631/material-avatar: Simple material design avatars using canvas Canvasを使ったMaterialアバター実装jQueryプラグイン「material-avatar」。 次のような四角or円形＋文字でマテリアルデザインっぽい画像を作れます。 WEBサービスなどで、画像を使わなくても個人のアバターとして使うことが出来そうですね。 関連エントリ Rebound.jsとCanvasを使った超カッコイイローディングアニメーション実装デモ Canvasを使って画像の明るさ、コントラスト、セピア等の細かい調整が出来る「CamanJS」
Canvasの大きさを動的に変更する - Qiita
Canvasの大きさをCSSで指定したら見事にハマりましたよ． キャンバスの大きさをデフォルト値からの倍率で変更したかったのですが，CSSでwidthとheightをピクセルで指定したところ，キャンバス内で描画される内容が引き伸ばされるようになりました． 描画内容が引き伸ばされないように工夫する必要が出てきてしまって，過去最悪のスパゲッティコード化する恐れがあったので，どうにかならないか調査しました． canvasタグはwidth属性とheight属性で大きさを決めます．デフォルト値は300x150pxで，CSSでwidthとheightを指定すると，canvasが画像扱いになって引き伸ばされるようです．それならば，canvasタグのwidth属性とheight属性を直接変更してやることで，キャンバスの大きさを動的に変更できるのではないかと仮説を立てました． var elem = docu
CSSとHTML Canvasで作るモーショングラフィック - ICS MEDIA
ICS MEDIAのトップページに掲載しているモーショングラフィック。これはCSSとHTML Canvas要素を使って作成したものです。時間経過とともに波の形状と色彩が変化し、多彩な表現を楽しめるようになっています。 本記事ではCSSとHTML Canvasの理解につながることを目標に、このモーショングラフィックの作成方法をステップ形式で解説します。サンプルのソースコードはすべてGitHubにて公開していますので、あわせて参照ください。 ▲ 完成版サンプル ステップ1. CSSでグラデーション背景の作成 サンプルを別ウインドウで開く ソースコードを確認する はじめに、時間経過で色彩が変化するグラフィックを作成しましょう。CSSで縦に長いグラデーションの背景を用意し、CSSアニメーションを使って縦方向に移動させることでグラデーションが変化する表現ができます（ステップ1のソースコード)。 #b
HTML5+Canvasで学ぶ物理アニメーションの基礎
Posted: 2015.07.28 / Category: javascript / Tag: HTML5, アニメーション HTML5+Canvasを使用して物体が落下するという簡単な物理アニメーションを作成してみます。 Canvasアニメーションの基礎については下記を参考にしてください。 この記事は下記をベースとして進めます。 HTML5で作るCanvasアニメーションの基礎 HTML5+Canvasでパーティクルっぽいのを作ってみる 基本となるオブジェクトを作成する 前回作成したParticleオブジェクトを少し編集します。 var Particle = function(scale, color, vx, vy) { this.scale = scale; //大きさ this.color = color; //色 this.vx = vx; //X速度 this.vy = vy
Two.js
TIP Prior to v0.7.0-alpha.1 Two.js requires Underscore.js and Backbone.js Events. If you're already loading these files elsewhere then you can build the project yourself and get the file size even smaller. For more information on custom builds check out the source on github. # Overview Overview # Focus on Vector Shapes Two.js is deeply inspired by flat motion graphics (opens new window). As a resu
俺がmongoDBに「画像データ」として保存してみた件 - Qiita
mongoDBにcanvasの描画を画像データとして保存してみる。 toDataURL()を使う。 from bottle import run, get, post, request, redirect from bottle import TEMPLATE_PATH, jinja2_template as template import bottle import pymongo app = bottle.app() TEMPLATE_PATH.append("./templates") @app.route('/') def index(): return template("index.html") @app.route('/post', method=['POST']) def getimg(): img = request.forms.get('img'); name = re
canvg.js·SVGをパースしてCanvas上に描画 MOONGIFT
HTML5になってから新しく出てきたグラフィックス要素にSVGとCanvasがあります。Canvasはバイナリとして生成され、SVGはベクターデータでありその使い分けはできるでしょう。しかし逆にSVGデータをCanvas内に描画したい時もあるはずです。 そこで使ってみたいのがcanvg.jsです。SVGデータをパースし、Canvas内に描画してくれるライブラリです。 canvg.jsの使い方 サンプルです。右側が素のSVG、左側がcanvg.jsによる出力です。 テキスト出力の再現度も高いです。 こんな細かい帳票も再現できます。 カラーリングにも対応。 canvg.jsはさらにオブジェクトを描画したり、アニメーションにも対応しています。SVGをSVGのままだけでなく、Canvasと組み合わせることでゲームに使ったり、編集不可のデータを生成したりするのに使えそうです。 canvg.jsはJa
HTML5 Canvasで動くジェネラティブ・アートをブログに貼る - roombaの日記
「ジェネラティブ・アート」 最近『ジェネラティブ・アート』という本を買いました。ジェネラティブ・アート(Generative Art)とは、通常のアート作品のように人間が描いたりつくったりするのではなく、何らかのアルゴリズムやランダム性を利用して生成的につくられるものを言います。ちょっとしたプログラムでアートができるので、絵心が不要なのが魅力です。 下のように画像検索すると、かっこいいものがいくつもでてきます。 generative art - Google 検索 HTML5 Canvasで描いた絵をブログに貼り付ける方法 本を読んだら実際に製作してこのブログに貼り付けたいので、お絵描き方法としてはHTML5 Canvas + Javascriptを使うことにし、貼り付け方を調べてみました。本ではProcessingという言語を使っているのですが、Javascriptの方が好みなので。 試
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Canvasをめちゃくちゃ使いやすくするライブラリ「UnitaryJS」作った - Qiita
GitHub - jnicol/particleground: A jQuery plugin for snazzy background particle systems
