Dygraphs — main page
⚠ Please visit the official Dygraphs homepage https://dygraphs.com/ instead. You are reading this on a mirror, which may have outdated, incomplete and/or locally patched information, or as part of the Debian package; links may not work. dygraphs is a fast, flexible open source JavaScript charting library. It allows users to explore and interpret dense data sets. Here's how it works: This JavaScrip
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
OperaのCanvasが凄いのでモザイク - f8g
いまさらながらOperaにはgetPixel/setPixelがあることを知りました。 http://orera.g.hatena.ne.jp/higeorange/20080604/1212505679 Operaさんはすげえぜ！ ただ、色の指定が文字列ってところが使いづらい。 ということでモザイク。 CanvasRenderingContext2DGame.Color = function(r, g, b){ this.r = r; this.g = g; this.b = b; this.toString = function(){ return "rgb(" + [this.r, this.g, this.b] + ")"; }; }; CanvasRenderingContext2DGame.prototype._getPixel = function(x, y){ var co
いま HTML5::Canvas って使えるの? (HTML::Canvas のサポート状況) - latest log
Opera の getContext("opera-2dgame") について追記しました。 fillText(strokeText) + pattern, + linerGrad, radialGrag について追記しました。 uupaa-excanvas.js ver 0.3 リリース版に基づき表を更新しました。 uupaa-excanvas.js ver 0.31で、drawImage(canvas, ...) をサポートしました。 先ほど Windows XP 上で調べました。Mac や Linux だとちょっと違うかもしれません。 # レンダリングの実例はhttp://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.js/DEMO.htmで見れます。 凡例 5: 実装されており他のブラウザの描画結果と互換性がある(
有須子時計 (Kanasansoft Web Lab.)
何故かGreasemonkey配下では2DコンテキストのputImageDataとgetImageDataが動かないため、unsafeWindowを仕様しています。注意して下さい。 今回は、JavaScriptでかなりまじめに画像処理を行なっています。処理の大まかな流れは以下の通り。 事前準備 有須子の画像はBase64化されてGreasemonkey内に記述されています。 「0」〜「9」までの数字と「:」の文字は、赤いハロー効果を強く効かせた画像と弱く効かせた画像の各2種類、合計22枚を有須子画像と同様に保存しています。 (1) Base64の有須子画像をImageオブジェクト化 (2) Imageオブジェクトの有須子画像をCanvasオブジェクト化 (3) Canvasのコンテキストを取得し、三角関数を使って画像を歪ませた新たなCanvasを生成(歪み方は乱数で毎回変化する) (4)
transform() メソッド - Canvasリファレンス - HTML5.JP
原文：http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-transform サンプル transform() メソッドは、一度セットされると、それ以降に描かれる図形はすべてその変換マトリックスが適用されます。transform() メソッドで変換マトリックスを定義したあとに、別の変換マトリックスを transform() メソッドで定義すると、2つの変換マトリックスを掛け合わせた変換マトリックスが適用された状態となります。 もし、新たな変換マトリックスを適用したい場合は、setTransform() メソッドで変換マトリックスを定義しなければいけないことに注意してください。 では、まず setTransform() メソッドの使い方をみていきましょう。 setTransform() メソッドの例 このサンプルは、
武器ジェネレータ
入力した名前によって曲線具合が変化しますので、一人一人異なるオリジナルの武器となります。 武器の強さが1〜100で表示されますが、25が平均的な強さです。 自分の武器を「武器バトル」に参加させることができます。 武器バトル ご自由にリンクして頂いて構いません。 番組や雑誌などでのご紹介は、管理人に無許可でご自由に紹介して頂いて構いません。 画面のスクリーンショットなどは、ブログなどにご自由に載せて頂いて構いません。 トラブルに関する一切の責任は負いません。
canvasを使って円周率を求める(getImageDataメソッド) - 素人がプログラミングを勉強していたブログ
canvasに円を描いて面積を求め、rの二乗で割って円周率の近似を求める。 rを大きくすればより近い値が求められるが、より実行に時間がかかる。 500でも十分CPUを食うので注意。 var s = 0, r = 500; var canvas = document.createElement('canvas'); canvas.width = canvas.height = r * 2; var context = canvas.getContext('2d'); context.arc(r, r, r, 0, Math.PI * 2, true); context.fill(); for (var x = 0; x < r * 2; x++) for (var y = 0; y < r * 2; y++) context.getImageData(x, y, 1, 1).data.pop
createImageData, getImageData, putImageData メソッド - Canvasリファレンス - HTML5.JP
構文 imagedata = context . createImageData(sw, sh) CSS ピクセルで指定された寸法の ImageData オブジェクトを返します（その寸法は、そのオブジェクトからアクセスできる実際のデバイスのピクセルとは異なる数に対応付けられるかもしれません）。返されたオブジェクトにあるすべてのピクセルは、透明な黒となります。 imagedata = context . createImageData(imagedata) 引数と同じ寸法となる ImageData オブジェクトを返します。返されるオブジェクトのすべてのピクセルは透明な黒となります。 引数が null なら、NOT_SUPPORTED_ERR 例外を投げます。 imagedata = context . getImageData(sx, sy, sw, sh) canvas の指定の矩形に対す
canvas 要素で画像にフィルタを適用したい - ヨーキョクデイ
ImageData オブジェクトなるものを取得すると、その data プロパティをいじることでピクセルごとに画像をいじることができるらしい。Canvasリファレンス - getImageData/putImageDataメソッド- HTML5.JP を見ればいいわけだけど、結局は data プロパティというのは配列であって、各ピクセルの情報がその要素になっている。そしてその要素の値を変更していくことで画像にフィルタをかけるということを実現しようではないかというのが今回の話。 流れとしては canvas に適当な画像を作り、getImageData メソッドでその画像についての ImageData オブジェクトを取得し、data プロパティをいじり（フィルタ）、その中身が変更された ImageData オブジェクトを putImageData メソッドで canvas に書き出すという感じ。
Drawing Graphics with Canvas - MDC
Firefox 1.5 より、 Firefox はプログラム可能な画像のための新しい HTML 要素を含みます。<canvas> は WHATWG の canvas の仕様を基にしています。WhatWG canvas 仕様自体は Safari で実装された Apple の <canvas> を基にしています。クライアント上でグラフ、UI 要素、および他のカスタムグラフィックスの描画に使用することができます。 <canvas> は 1 つ以上の描画コンテクスト を公開した固定サイズの描画表面を作ります。現在は 2 次元描画コンテクストのみが実装されています。 3D グラフィックスの描画には、 WebGL レンダリングコンテクストを用いると良いでしょう。 始めに、2 つの交差した長方形を描く簡単な例を見てみましょう。片方の長方形は透明度を持っています。 function draw() { va
excanvas.js でクロスブラウザ canvas を使ってみた。 - IT戦記
excanvas.js は Google が作った js ライブラリで、これを使うと IE でも canvas 要素が使えるようになる。VML に canvas のインタフェースを持たせた感じです。 ためしに使ってみた。。。 http://sample.ecmascript.jp/20060531.html …しかし excanvas.js まだまだ互換性が足りない。 Firefox の canvas でアニメーションをさせるのが重すぎる。 Firefox リークしまくり。 やっぱり、まだまだ先の技術なのかなー。 とはいえ、VML、SVG、canvas で何が出来て、何が出来ないのかをしっかり理解しておきたい。絶対何かに使えるはず！ リンク canvas http://www.whatwg.org/specs/web-apps/current-work/#scs-dynamic VML h
SEOI.NET
メディアでのご紹介は管理人に無許可でご自由に紹介して頂いて構いません。 画面のキャプチャやスクリーンショットなどはご自由に載せて頂いて構いません。 トラブルに関する一切の責任は負いません。
Canvasとは - Canvas - HTML5.JP
Canvasとは、ブラウザ上に図を描くために策定された仕様です。 これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現するために、FlashやJavaアプレットが使われてきました。 Canvasは、FlashやJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことができます。 実際に、Canvasを使って円グラフを作ってみました。上図はFirefox 2.0での結果をキャプチャーしたものです。Canvasで描かれたのは色がついた図形部分です。Internet Explorer 6以上、Firefox 1.5以上、Opera 9以上、Safari 1.3以上であれば、実際のCanvasの動作をご覧頂くことができます。 [Canvasを使った円グラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サービス終了のお知らせ
テキストの描画 - Web API | MDN
Untitled
http://diaspar.jp/node/155
Decorative borders and the Canvas
Canvas Painter