[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)
File APIとCanvasでローカルの画像をアップロード→加工→ダウンロードする ｜ Tips Note by TAM
ユーザーのローカルにある画像をアップロード、ブラウザ上で加工して、加工後の画像をダウンロードする処理をFile APIとCanvasを使って実装してみます。 ■目次 Canvas上に画像を表示 File APIでアップロード File APIでアップロードした画像をCanvas上に表示 Canvas上で画像の加工 画像として出力 ダウンロードリンクを表示 1. Canvas上に画像を表示 まずはCanvas上にダミーで画像を表示させてみます。 See the Pen QqOyNp by tam_yi (@tam_yi) on CodePen. drawImage()メソッドでCanvas上に画像を表示させています。 2. File APIでアップロード File APIを使ってアップロードした画像をブラウザ上に表示してみます。 See the Pen dVZGOE by tam_yi (@
CSS Font Loading Module Level 3を試してみた - console.blog(self);
1年以上前から、ちゃんと調べたいと思っていたけど、やっていなかった。 CSS Font Loading Module Level 3は、2014/06/30時点で最終草案(Last Call Working Draft) になっている。CSS Font Loading Module Level 3はフォントのローディングに関する仕様書。 CSS Font Loading Module Level 3 - W3C Last Call Working Draft, 22 May 2014 最新のEditor's Draftはこっち。 CSS Font Loading Module Level 3 - Editor’s Draft フォントについての仕様書はCSS Font Module Level 3で、2014/06/30時点で勧告候補(Candidate Recommendation)にな
drawImage() メソッド - Canvasリファレンス - HTML5.JP
構文 context . drawImage(image, dx, dy) context . drawImage(image, dx, dy, dw, dh) context . drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) canvas に指定のイメージを描画します。引数は、次のように解釈されます： もし、第 1 引数が img, canvas, video 要素でないなら、TYPE_MISMATCH_ERR 例外を投げます。image にイメージ・データがないなら、INVALID_STATE_ERR 例外を投げます。数値の引数に矛盾があるなら（例えば、描画先が 0 × 0 の矩形）、INDEX_SIZE_ERR を投げます。image が完全にデコードできていないなら、何も描画されません。 仕様 canvas上に画像を表示するには、
[69-8] Canvasでテキストを描画しよう
[69-8] Canvasでテキストを描画しよう 最終更新日：2019年02月06日 （初回投稿日：2015年01月20日） 今回は、<canvas>要素に「テキスト（文字列）」を描画してみます。 過去記事の「[69-2] canvasに基本的な図形を描こう」で、円グラフの中に文字を入れていますね。今日はその文字の入れ方です。 本日のINDEX テキストは fillText() と strokeText() で指定します フォントスタイル、サイズ、書体、色、線の太さの指定 引数「maxWidth」で最大幅を指定する（省略可能） textAlignプロパティで、横方向（x）の表示位置を指定する textBaselineプロパティで、縦方向（y）の表示位置を指定する 描画した文字列の情報を測定する measureText() measureText() を使って、文字列にアンダーラインや背景ボ
![[69-8] Canvasでテキストを描画しよう](https://cdn-ak-scissors.b.st-hatena.com/image/square/58fe6181cc77ea81c600cf505fefe9be3d9eef63/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-49.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2F131205-3.gif)
描画面を移動させる-HTML5編
HOME JavaScript入門[HTML5編] 描画面を移動させる 前のページでは描画面を回転・変形させる方法を見てきました。 このページでは描画面を移動する方法について見ていきたいと思います。 描画面を回転させる時に、起点を移動させれば扱いやすくなります。 描画面を移動させる命令文 前のページではsetTransform()の最初の４つの引数を見てきましたが、 5番目と6番目の引数は描画面を移動させる時に指定します。 それと、もう一つ別の命令を見てみましょう。 context.setTransform(m11,m12,m21,m22,dx,dy) 第５引数，第６引数で指定した分だけ描画面を移動します。 context.translate(dx,dy) 指定しただけ描画面の起点（左上の点）を移動します。 この二つは同じ効果があります。 描画面の移動だけでなく変形も必要ならsetTran
save(), restore() メソッド - Canvasリファレンス - HTML5.JP
構文 context . save() 現在の状態をスタックの最後に加えます。 context . restore() スタックの最後の状態を抜き出し、その状態をコンテキストに復元します。 仕様 コンテキストは描画状態のスタックを維持します。描画状態は次の要素から構成されます： 現在の変換マトリックス 現在のクリップ領域 次の属性の現在の値： strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline. 現在のパスと現在のビットマップは描画状態に含まれません。現在のパスは、b
さまざまな図形を描く - Canvas - HTML5.JP
Canvasでは線を引くだけではなく、さまざまな図形を描くためのメソッドを用意しています。このコーナーではCanvasで利用できる図形描画のいくつかをご紹介します。 矩形（長方形） 先ほどのコーナーでは、線を引くことで矩形を描きましたが、一発で矩形を描くメソッドがあります。 ctx.fillRect(x, y, width, height) 塗りつぶした矩形を描きます。x, yには矩形の左上端の座標を、widthに矩形の横幅を、heightに縦幅を引数として与えます。 ctx.strokeRect(x, y, width, height) 矩形を描きますが、枠線のみとなります。引数はfillRectメソッドと同じです。 ctx.clearRect(x, y, width, height) 矩形を削除します。削除された部分は透明になります。引数はfillRectメソッドと同じでです。 それぞ
lineTo(x, y)－Canvasリファレンス
lineTo(x, y)メソッドは、直前の座標と指定座標を結ぶ直線を引く際に使用します。 指定する座標は、<canvas>要素の左上端からの距離となります。 すでに作成されているサブパスがある場合、lineTo()で作成される新しいサブパスは直前のサブパスに繋がる直線となります。 すでに作成されているサブパスは変更されず、点と直線からなる新しいサブパスがパス（サブパスの集合したもの）に追加接続されます。 サブパスとは、パスを構成する線の一本のことです。 パスの基本的な概念については、beginPath()のページを参照してください。 ■直線を描画する 新しい直線を描画する場合は以下のような流れとなります。 beginPath()で現在のパスをリセットする moveTo(x, y)でパスの開始座標を指定する lineTo(x, y)で座標を指定してラインを引く stroke()で現在のパスを
Canvasの使い方 - Canvas - HTML5.JP
このコーナーでは、Canvasを使うにあたっての事前準備と、簡単な使い方をまとめました。 ExplorerCanvasのダウンロード Internet ExplorerはCanvasに対応していません。そのため、Googleが提供しているExplorerCanvasというJavaScriptライブラリをダウンロードしましょう。0002 ExplorerCanvasダウンロード 2009/03/24現在、ExplorerCanvasの最新版は Release 3 です。excanvas_r3.zip をダウンロードし解凍すると、excanvas.jsというファイルがあります。実際に使うのは、このファイルのみです。このファイルを、Canvasを使うHTMLファイルと同じ場所に設置しておいてください。 HTMLの準備 Canvasを使うHTMLでは、excanvas.jsをロードするようscri
lineWidth = 線の幅－Canvasリファレンス
lineWidth属性は、線の幅を指定する際に使用します。 指定できるのは0より大きい有限の数値のみで、それ以外の値を指定しても無視されます。 座標空間の単位が適用されるため、特に単位を付ける必要はありません。 lineWidth属性を指定しない場合の初期値は1.0です。 ■引数（値）の説明 HTML + JavaScriptソース<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvasで図形を描く</title> <script type="text/javascript"> <!-- function test() { //描画コンテキストの取得 var canvas = document.getElementById('sample'); if (canvas.getContext) { var contex
Canvasの使い方－Canvasリファレンス
■Canvasによる描画指定の一般的な手順 Canvasでは、HTMLとJavaScriptを組み合わせて描画内容を指定します。 Canvasによる描画は、大まかに以下のような流れとなります。 HTMLで、<canvas>要素の幅と高さ、および、id名を指定する getElementByIdメソッドでHTMLと関連付けて、getContextメソッドで描画機能を有効にする canvasAPIの仕様で定められたメソッドやプロパティを使用して、具体的な描画内容を指定する ■HTMLで、<canvas>要素の幅と高さ、および、id名を指定する HTMLソース <canvas id="sample" width="400" height="300"> 図形を表示するには、canvasタグをサポートしたブラウザが必要です。 </canvas> HTMLの側では、<canvas>要素で、描画領域の幅と
色を指定する - Canvas - HTML5.JP
ctx.strokeStyle = color 図形の枠線の色を指定します。colorに指定する色はCSSで指定するフォーマットに対応しています。 ctx.fillStyle = color 図形を塗りつぶす色を指定します。colorに指定する色はCSSで指定するフォーマットに対応しています。 それぞれのメソッドの具体的な使い方を見てみましょう。 onload = function() { draw(); }; function draw() { var canvas = document.getElementById('c1'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); /* 円 #1 */ ctx.beginPath(); ctx.fillSt
直線・多角形を描く-HTML5編
HOME JavaScript入門[HTML5編] 直線・多角形を描く このページから、実際にCanvasに図を描いていきます。 まずは基本的な直線と、それを結び合わせた多角形の描き方を見ていきましょう。 2Dを描くためのスクリプト 前のページで、Internet Explorer対策の「excanvas.js」の読み込みと、 idの付いたcanvasタグを記述することを説明しました。 まずはそこまで完成させましょう。 ではこのcanvasに図形を描くためのソースを見てみましょう。 var cvs = document.getElementById("cv"); var ctx = cvs.getContext("2d"); document.getElementById()で、id名「cv」の付いたcanvas要素を取得し、変数cvsに代入しています。 次にそのcanvasに2D（平面）
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 要素内の <
Canvasで描画した画像を送信してサーバに保存する - Qiita
タイトルどおりのことをやった際の実装時メモ。 Canvasから画像を取得 2通りの方法が見つかった。 Base64への変換 Blobへの変換 Base64への変換 canvas.toDataURL()を呼び出すだけで取得可能であるが、 画像サイズに比例した巨大な文字列となり、変換によって元サイズより33%データ量が増える。 取得したBase64を<image>のsrcに指定すれば画像表示され、 <a>のhrefに指定すればリンククリックでダウンロードできてこれはこれで便利。 Blobへの変換 canvas.toBlob()を呼び出すだけで取得可能。 Blob形式で表現すれば、createObjectURL(blob)によりURL参照が取得できるので、 画像サイズに依存せずメモリ使用量を抑えられるらしい。（未確認) これは便利と思いきやcanvas.toBlob()はFirefoxでのみサポ
canvasを画像に変換する-HTML5編
HOME JavaScript入門[HTML5編] canvasを画像に変換する ここでは、canvasに描いた図形や文字を、画像に変換する方法を見ていきます。 画像に変換すれば、右クリックで保存したり、他の画像と入換えしたりすることができるようになります。 canvasデータを画像に変換する canvasで描画したデータを画像に変換するには、toDataURL()を使います。 canvas.toDataURL(画像形式) キャンバス内のデータをdata:形式に変換します。 画像形式はimgage/png，image/jpeg，image/svg+xmlの何れかを指定します。 省略した場合はPNG形式になります。 toDataURL()の前は、contextではなくcanvasである点注意して下さい。 画像変換サンプル 以下のサンプルでは、canvasにラインを９列、ランダムな色で描いてい
やったー JS で LGTM ジェネレターできたよー！ #HTML5 #File_API - 鈴木うどんの横須賀おもしろ生活
http://ochinchin.org/~udonchan/lgtm_gen/ コードはこのへんにある。 いわゆる HTML5 っぽいプログラムで、File API 使ってローカルの画像ファイルを canvas 読み込んで編集するという練習課題的プログラム。 canvas をどうやってファイルに落とすかのやり方はいろいろ思案したのだけれども、 今のところ以下のような書き方をしている。 var type = 'image/png'; var url = $canvas[0].toDataURL(type); var link = document.createElement('a'); link.href = url; link.download = 'output.png'; var click = document.createEvent("Event"); click.initEve
Zoomquilt
The Zoomquilt A collaborative infinitely zooming painting Created in 2004 Up and down keys to navigate A project by Nikolaus Baumgarten Participating illustrators: Andreas Schumann, Eero Pitkänen, Florian Biege, Jann Kerntke, Lars Götze, Luis Felipe, Marcus Blättermann, Markus Neidel, Paul Painter, Oliver Schlemmer, Sonja Schneider, Thorsten Wolber, Tony Stanley, Ville Vanninen The Zoomquilt on Yo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript Charts - HTML5 Canvas Based Charting Library | KoolChart