マウスで指定した範囲の画像を取得する[Canvasの矩形選択2]
<注意事項> ブラウザによってはローカル環境ではセキュリティエラーでサンプルを実行できませんので、サーバーにアップしてから動作確認をして下さい。 実際に試してみる 次の画像の上で、マウスで範囲を指定すると右側に選択範囲が描画されます。 マウスダウンで範囲の選択を解除できます。また、ドラッグ中にキャンバスの範囲外でマウスアップした場合は、範囲選択が無効となります。 サンプルコード 前回のサンプルに選択範囲の画像を取得する処理などを追加したコードです。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script> // キャンバス var src_canvas; var src_ctx; // イメージ var image; // 矩形用 var MIN_WIDTH = 3; var MIN_HEIGHT = 3; var rect
![マウスで指定した範囲の画像を取得する[Canvasの矩形選択2]](https://cdn-ak-scissors.b.st-hatena.com/image/square/4af1465cf1036f95b1b69f4c0702e72611933727/height=288;version=1;width=512/https%3A%2F%2Fwww.petitmonte.com%2Fimages%2Fog_image.jpg)
君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA
ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？ webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています
SVGやCanvasで実装した平らな要素を3Dモデルでレンダリングできる超軽量JavaScriptライブラリ -Zdog
面白そうなJavaScriptがリリースされました！ SVGやCanvasで実装した平らな要素をブラウザ上に3Dモデルでレンダリングすることができる超軽量JavaScriptライブラリを紹介します。レンダリングされた形状は3D空間に存在するかのようにクリックやドラッグなどで操作ができます。 Zdog Zdog -GitHub Zdogの特徴 Zdogのデモ Zdogの使い方 Zdogの特徴 Zdogは<canvas>とSVG用の3D JavaScriptエンジンです。 Zdogを使用すると、3DモデルをWeb上でデザインしてレンダリングすることができます。 軽量ライブラリ Zdogは、28KbのJavaScriptです。 滑らかなレンダリング 丸みをおびた美しい形でレンダリングされます、ジャギーはありません。 簡単 モデリングは単純明快な宣言型APIで行われます。 Zdogのデモ Zdog
[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)にな
動的コンテンツを画像化できるJSライブラリ "html2canvas" を使おう - KAYAC engineers' blog
こんにちは、HTMLファイ部新卒の石崎です。 今回は、Webページを画像化できるJavaScriptライブラリ、html2canvas について紹介します。 html2canvasを上手に活用することで、Webサイト側で表示ページのキャプチャを用意して処理したり、ユーザに提供したり出来るため、作れるWebサービスの幅がきっと広がります。 スクリーンショットを撮る html2canvasを使うとWebページのキャプチャを作れますが、そもそもスクリーンショットを得る方法は他にいくつもあります。 Webページの見えている部分のキャプチャをユーザが撮る Mac command + shift + 4 + space Windows Alt + PrintScreen このコマンドで、Webページのウィンドウに表示されている部分のキャプチャを撮ることができます。 スマートフォンであれば、端末の電源ボ
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)
複数のCanvasを結合し、1つの画像として保存したい
質問をすることでしか得られない、回答やアドバイスがある。15分調べてもわからないことは、質問しよう！新規登録して質問してみよう
font プロパティ - Canvasリファレンス - HTML5.JP
構文 context . font [ = value ] 現在のフォント設定を返します。 値をセットしてフォントを変更することができます。その構文は、CSS の 'font' プロパティと同じです。CSS フォント値として構文解析できない値は無視されます。 関連キーワードと長さは、canvas 要素のフォントに対して算出されます。 仕様 font IDL 属性は、値がセットされると、CSSの 'font' プロパティと同じように解釈されなければいけません（ただし、'inherit'のようなプロパティ非依存のスタイルシート構文はサポートされません。）。その結果、フォントは、'normal' に強制された 'line-height' コンポーネントで、そして、CSS ピクセルに変換された 'font-size' コンポーネントで、そして、明示的な値に算出されているシステムフォントで、コンテキ
javascriptで文字列の描画幅を取得する方法 - Qiita
文字列の長さに応じてフォントサイズを縮小したり、省略表示したりできないかと思って調べてみました。 canvasのmeasureText()を使う方法と、DOMのoffsetWidthの値を使う方法があるようです。 canvasを使う方法 HTML5のcanvasを使いますので、canvas要素に非対応なIE8以前ではexcanvas.jsが必要です。 IEとexcanvasのバージョンの組み合わせ次第で動かない可能性もあります。 手順： (1)まずHTML中にcanvasを用意する <canvas id="canvas" width="0" height="0" style="visibility:hidden;position:absolute;"></canvas> Firefox9ではstyleでdisplay:none;としても大丈夫でしたが、IE+excanvasでは駄目だったの
描画面を移動させる-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>要素で、描画領域の幅と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript Charts - HTML5 Canvas Based Charting Library | KoolChart