マウスで指定した範囲の画像を取得する[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)
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)
動的コンテンツを画像化できるJSライブラリ "html2canvas" を使おう - KAYAC engineers' blog
こんにちは、HTMLファイ部新卒の石崎です。 今回は、Webページを画像化できるJavaScriptライブラリ、html2canvas について紹介します。 html2canvasを上手に活用することで、Webサイト側で表示ページのキャプチャを用意して処理したり、ユーザに提供したり出来るため、作れるWebサービスの幅がきっと広がります。 スクリーンショットを撮る html2canvasを使うとWebページのキャプチャを作れますが、そもそもスクリーンショットを得る方法は他にいくつもあります。 Webページの見えている部分のキャプチャをユーザが撮る Mac command + shift + 4 + space Windows Alt + PrintScreen このコマンドで、Webページのウィンドウに表示されている部分のキャプチャを撮ることができます。 スマートフォンであれば、端末の電源ボ
複数のCanvasを結合し、1つの画像として保存したい
質問をすることでしか得られない、回答やアドバイスがある。15分調べてもわからないことは、質問しよう！新規登録して質問してみよう
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編
HOME JavaScript入門[HTML5編] canvasを画像に変換する ここでは、canvasに描いた図形や文字を、画像に変換する方法を見ていきます。 画像に変換すれば、右クリックで保存したり、他の画像と入換えしたりすることができるようになります。 canvasデータを画像に変換する canvasで描画したデータを画像に変換するには、toDataURL()を使います。 canvas.toDataURL(画像形式) キャンバス内のデータをdata:形式に変換します。 画像形式はimgage/png，image/jpeg，image/svg+xmlの何れかを指定します。 省略した場合はPNG形式になります。 toDataURL()の前は、contextではなくcanvasである点注意して下さい。 画像変換サンプル 以下のサンプルでは、canvasにラインを９列、ランダムな色で描いてい
キャンバスクエスト
canvasタグに対応したブラウザでのみ動作します。 移動 ‥ 矢印キー or 'W''A''S''D' or テンキー 話す ‥ スペースキー or テンキー（0） Ｓａｖｅ Ｌｏａｄ クレジット BGM CHRONOS RECORD ｸﾛﾉｽﾚｺｰﾄﾞさん お借りした楽曲 山麓の村 village.ogg H/MIX GALLERY 秋山裕和さん お借りした楽曲 Spring walk road.ogg 効果音 On-Jin ～音人～ 笠畑 栄樹さん お借りした効果音 ドアの開閉音 door_open.ogg 「ピ！」 pi.ogg グラフィック First Seed Material FSM STAFFさん お借りした画像 村人（含むプレイヤーキャラクター） murabito.gif ドア obj.gif 村のマップチップ village.gif village_b.gif フォ
canvas要素の基本的な使い方まとめ
Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています．えーと，そりゃもうゴリゴリと． 本文書はsvg要素の基本的な使い方まとめの姉妹版として作成を開始した．canvas要素の仕様は現在進行中で色々と変化しているため，一筋縄で行かないが大方のapiについて書き上がったので公開する．なお，まだ使えない機能等満載だったり，内容に間違いがあっても中々検証することができないので，その部分を了承した上でご利用下さい… 更新履歴 2012/07/18 初版 1・canvas要素の概観 canvas要素とは canvas要素はhtml5で採用されたwebブラウザ上でグラフィックを描画するための機構であり，webページの機能性・視認性が重要視される昨今では，svg要素と並び重要な役割を果たしている．もともとapple社が自社製osの機能向上策として，同
線形グラデーションを指定する - Canvas - HTML5.JP
このコーナーでは、Canvasで描いた図形にグラデーションを指定する方法を紹介します。グラデーションの処理に関しては、ブラウザごとに若干の違いがあります。このコーナーではブラウザごとの特徴についても触れていきます。 線形グラデーションとは 線形グラデーションとは、開始地点の色から徐々に終了地点の色に直線的に色を変化表示する効果を表します。そのため、開始地点の色と終了地点の色と座標を事前に指定しなければいけません。Canvasの仕様では、開始と終了の2地点だけでなく、その途中の地点にも色を指定することも可能です。いくつもの色を波打つようにグラデーション効果を作ることも可能です。 線形グラデーションを実現するには、2DコンテキストのcreateLinearGradientメソッドと、createLinearGradientメソッドから得られるCanvasGradientオブジェクトのaddCo
[javascript]canvasで円や角丸の矩形を描画する
円や角丸の矩形の描画canvasで円や、角丸の矩形を描く。 関数が用意されていないので自作します。 ソースコードfunction draw(){ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var pi = Math.PI; // 塗りつぶし円を描く var fillCircle = function (x, y, r) { ctx.beginPath(); ctx.arc(x, y, r, 0, pi * 2.0, true); ctx.fill(); }; // 塗りつぶし角丸の矩形を描く var fillRoundRect = function (l, t, w, h, r) { ctx.beginPath(); ctx.arc(l + r, t + r, r,
![[javascript]canvasで円や角丸の矩形を描画する](https://cdn-ak-scissors.b.st-hatena.com/image/square/6751ac5aae2183bb6515301778f69fe32895e6a7/height=288;version=1;width=512/http%3A%2F%2F4.bp.blogspot.com%2F_rrZRIwrVEZ4%2FS5jfL-5yzAI%2FAAAAAAAAAJ8%2Fmu3hg5AnwLY%2Fw1200-h630-p-k-no-nu%2Fcircle_and_roundrect.png)
要約: Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装がやばいという話
2012 年 9 月 26 日 追記しました。 要約エントリー。 元記事 : iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas> アップルのサイトの iPhone5 のページにある「スライドしてアンロック」のアニメーションが、信じられない実装になっている、という話。簡単に要約してみた。（ミスなどの指摘は @lowply までお願いします） もともと h.264 と WebM の動画フォーマット戦争でブラウザ互換性の問題がまだ残っている上、iPhone などは「再生ボタン」を押さないと再生できなかったりするので、こうした短いアニメーションに video タグを使うことは最適解ではなかったらしい。 そこで発想の転換をして、Retina MBP のページでは、蓋が開くたった 2
[JS]オーディオをコントロールするオープンソースのスクリプト -jai
HTML5を使用した、JavaScriptでOggフォーマットのオーディオファイルをコントロールするスクリプト「jai」を紹介します。 jai - javascript audio interface 「jai」は、「JavaScript Audio Interface」の略で、グラフィカルなインターフェイスには画像を使用せず、canvasによってレンダリングされています。 対応する音声ファイルはOggフォーマットで、コーディックには「 Ogg Vorbis audio codec」が使用されています。 プレイリストはスタイルシートでデザインされたリスト要素で、下記のような書式になります。 <textarea name="code" class="html" cols="60" rows="5"> <li> <a href="@F1LT3R - Cryogenic Unrest.ogg">
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript Charts - HTML5 Canvas Based Charting Library | KoolChart
5509.me