React+Canvasで画像コントロール - Qiita
はじめに 以前に投稿したCSSで写真コントロールUIを作るをさらに改良して、 画像をズームしたり、マウスドラッグで動かしたりできて、さらに画像のピクセル座標を取得するUIを作成した。 前回はreact/reduxのスタイル制御で実装したが、 今回はマウスでクリックした位置にピンを立てたりといった、 より複雑な画像コントロールを実現するため、 canvas内包のreactライブラリであるreact-konvaを使ってみた。 react-konvaを使うメリット 普通にcanvasを使うより断然簡単！ これは他のCanvas内包ライブラリも同じかもしれないが、 画像操作の実装が格段にしやすくなった。 前回の投稿のようにスタイルを操作する時の苦労から解放された。 画像のズームやドラッグをする際は、width, height, 画像の位置を示すx, yを操作すればいい。 これらのパラメータをsta
[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2
チャートやグラフは、さまざまなスマホアプリで見かけます。 スマホのデバイスに対してデザイン、インタラクション、パフォーマンスに最適化されたチャートやグラフを実装するHTML5 Canvasベースのライブラリを紹介します。 Node.js、React Nativeなどに互換性もあり、50種類以上のチャートやグラフを簡単に利用できます。 スマホ向けのデザイン デザインはスマホに最適化されており、軽快なインタラクションでデータをより自然に表示します。 スマホに最適化されたパフォーマンス 軽量で、素晴らしいレンダリングのパフォーマンスを実現。 互換性 HTML5のCanvasベースで実装されており、Node.js、React Nativeで実行することもできます。 ライセンス MITライセンスで、個人でも商用でも無料で利用できます。 F2のデモ まずはスマホのアプリでよく見かける、美しいデザインと
![[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2](https://cdn-ak-scissors.b.st-hatena.com/image/square/38d845daa3306af6511040b4844ec0fb7250d64c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018083111.png)
Cacoo HTML5 バージョンが8月28日にリリース決定！編集画面のパフォーマンスが向上します。 | Cacooブログ
仕様やUI(画面)は現行バージョンと異なる可能性があります。 Cacooの最新版についてはこちらからご確認ください。 こんにちは！Cacooチームの平山です。いよいよ2017年8月28日より、HTML5で作られたCacooの編集画面が利用できます。 Cacoo HTML5 バージョンのリリーススケジュールについて、28日の段階では、新規で作成した図はすべてHTML5バージョンで編集可能に、リリース後一ヵ月をめどにしてすでに作成した図もHTML5バージョンで編集できるようになります。 Cacoo HTML5 バージョンでは、ユーザーインターフェースは従来のFlash版を踏襲していますが、内部処理が刷新されており、従来よりもパフォーマンスが向上しています。詳しい改善点は28日のリリース後にあらためて情報を公開します。 Cacoo HTML5 バージョン提供にあたって起きる変更点 反応速度が改善
JavaScriptでグラフ描画入門！全８個のライブラリをコード付きで一挙に解説！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、JavaScriptを使って「グラフやチャートを描きたい！」とか、「さまざまなデータを可視化させたい！」という人にオススメのJSライブラリをご紹介しようと思います。 また、すぐに使い始められるように、ミニマムな構成の「サンプルコード」も合わせて掲載しているので、自分に合ったライブラリを使う取っ掛かりになれば幸いです。 ■Chart.js 【Chart.js】 最近、活発にバージョンアップをしている「Chart.js」は、すべてのグラフが自動的にアニメーション表示されるユニークな仕掛けを持っており、シンプルで理解しやすい記述が出来る点も魅力です。 グラフの種類は少ないものの、モダンブラウザ＆レスポンシブ対応で、あまりカスタマイズせずに「デフォルト」のままでも手軽に使えるでしょう。 【 基本の書き方 】 「chart.js」ファイルは、公式
ReactNativeをなんとなく理解するためのReactCanvas - Qiita
個人的にはそこまでReactNativeに興味ないのだけど、今日なんとなくReactCanvasを試していたらなんとなくReactNativeを察した。 Flipboard/react-canvas https://github.com/Flipboard/react-canvas 作者はCanvasのネイティブ向け変換を作っていたEjectaの人。なるほど感ある。 参考: React Nativeがスマホアプリのフロント開発を変えるのか - ワザノバ | wazanova http://wazanova.jp/items/1676 試してみる SurfaceがReactCanvasのトップノードでそれ以下はcanvasでレンダリングされる 各ノードはleft, top, width, height が必須の絶対座標配置。CSSが分かる人は position: absoluteな状態だと思
Canvasで漫画にあるような吹き出しを書いてみた - Qiita
はじめに Canvasを使用して、漫画で使われるような 吹き出し表現を再現してみました。形自体にも汎用性があると思うので、吹き出し以外にも使えそうです。これで漫画表現シリーズは三作目となりました。（今までに書いたものは最下部を参照ください）今回書いた吹き出しは以下の3種類になります。 吹き出しのシッポ（何ていうのか分からない。。発言者を示す細い三角のやつです）は想定していません。 [動作イメージ] パーッとした吹き出し パンクな吹き出し モコモコな吹き出し なお実際の動作は以下で確認できます http://nekoneko-wanwan.github.io/demo/canvas/effect/fukidashi/light/ http://nekoneko-wanwan.github.io/demo/canvas/effect/fukidashi/punk/ http://nekonek
How Could Google's New Logo Be Only 305 Bytes When Its Old Logo Was 14,000 Bytes?
The old logo uses a complicated serif font which can only be created using bezier curves. All together, it has 100 anchor points, resulting in a 6 KB (6,380 bytes) file. When compressed, the size comes down to 2 KB (2,145 bytes). A simplified version of the new logo, on the other hand, can be constructed almost entirely from circles and rectangles (with the exception of the lower-case g): The enti
【Canvas練習ノート】CanvasをPNG画像ダウンロード – toBlobとsaveAs
canvasをPNG画像へキャプチャしダウンロード。 PNG画像へのキャプチャは canvas.toBlob を使います。 ダウンロードは FileSystem API で行います。 canvas.toBlob HTMLCanvasElement のメソッド toBlob は Blobオブジェクト（画像）を返してくれます。 ただ残念なことに Firefox しかサポートしておらず、polyfill メソッドを用意する必要があります。 w3c: File API#blob stackoverflow: Which browsers (and versions) support the Canvas.toBlob method? MDN: HTMLCanvasElement Example: Save toBlob to disk with OS.File (Chrome Context On
[JavaScript] Memo, Web Cam映像をCanvasへ鏡像（反転）表示
Web CamもJavaScriptで制御できるステキな時代。 そのまま表示させると、当たり前だけど反転してるように見えて気持ち悪いので鏡像表示させてみる。 後でゴニョゴニョしたいのでCanvas上で鏡像にする手順メモ。 Web Camを表示 video tagを設置。 <video width="640" height="480" src="" id="web_cam"></video> <canvas id="features" width="640" height="480" style="display: inline;"></canvas> var video = document.getElementById( "web_cam"); function init ( video ) { video.play(); } // web cam access navigator.ge
![[JavaScript] Memo, Web Cam映像をCanvasへ鏡像（反転）表示](https://cdn-ak-scissors.b.st-hatena.com/image/square/6c35180033ae4020a0e0c1b662cd0d153d918e3f/height=288;version=1;width=512/http%3A%2F%2Fwww.inazumatv.com%2F_fb%2Ffb_inazumatv2.png)
Webアプリをいまどきの手法で爆速開発した — KaoriYa
外道はるかぜちゃんジェネレータというWebアプリを いまどきな手法を用いて爆速で開発した話を紹介します。 先の3連休中、外道はるかぜちゃんジェネレータというWebアプリを開発&公開しました。ここで採用した開発手法がいまどきな爆速開発でしたのでちょっと紹介&ステマします。使った技術は以下の通りです。 AngularJS: Googleが開発しているViewModelなWeb開発ライブラリ(MVW: Model View Whateverだったかな?w) Github pages: スタティックサイトのホスティングに最適 Kii Cloud: mBaaS (mobile backend as a service) で共有データの保存に利用 HTML5 Canvas: 画像生成に。サーバサイドではなにもしてない! サービス概要 外道はるかぜちゃんジェネレータはベースとなる画像があり、そこに面白い
canvas要素の基本的な使い方まとめ
Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています．えーと，そりゃもうゴリゴリと． 本文書はsvg要素の基本的な使い方まとめの姉妹版として作成を開始した．canvas要素の仕様は現在進行中で色々と変化しているため，一筋縄で行かないが大方のapiについて書き上がったので公開する．なお，まだ使えない機能等満載だったり，内容に間違いがあっても中々検証することができないので，その部分を了承した上でご利用下さい… 更新履歴 2012/07/18 初版 1・canvas要素の概観 canvas要素とは canvas要素はhtml5で採用されたwebブラウザ上でグラフィックを描画するための機構であり，webページの機能性・視認性が重要視される昨今では，svg要素と並び重要な役割を果たしている．もともとapple社が自社製osの機能向上策として，同
jCanvas | jQuery meets the HTML5 canvas
Seriously, what is jCanvas? jCanvas is a JavaScript library, written using jQuery and for jQuery, that wraps around the HTML5 canvas API, adding new features and capabilities, many of which are customizable. Capabilities include layers, events, drag-and-drop, animation, and much more. The result is a flexible API wrapped up in a sugary, jQuery-esque syntax that brings power and ease to the HTML5 c
背景をCanvasにする - Qiita
背景をCanvasにしてグリグリ動かすとインパクトがあって良い。(これとかこういう感じ) 少し工夫しないとCanvasが前面に来てボタンの操作とかができなくなるので、下記のようなHTML/CSSを書いてやる。 <body> <canvas id="canvas"></canvas> <section id="body> /* 実際のbodyはここに書く */ </section> </body> #canvas { position:fixed; top:0; left:0; width:100%; height:100%; } #body { position:absolute; top:0; left:0; }
JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」:phpspot開発日誌
html2canvas - screenshots with JavaScript JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」 サーバサイドでブラウザを動かしてスクリーンショットを取るというより、利用者のブラウザ上でスクリーンショットをJavaScriptとcanvasを使って生成しちゃおうというものらしいです。 canvas非搭載ブラウザはflashcanvasやExplorerCanvas等の代替が必要とのこと。 html2canvasでレンダリングされたサンプルも見ることが出来ます。 frameやobjectのサポートはしていない点に注意。 スクリーンショットを取る仕組みをサーバに仕込むとタイムラグがあったりサーバ側は大変だったりで色々問題点を抱えていますが、クライアント側でやれば画像を受け取るだけでいいので便利です。 クライアントごとの表示
ExplorerCanvas
Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages. Overview Sample pages using the canvas tag are included with the source code. For more information about the canvas tag,
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブラウザ側でimageタグないしcanvasタグから画像ファイルを生成して、サーバにPOST送信したいです
直線の交差判定 - jsdo.it - Share JavaScript, HTML5 and CSS