タグ

canvasに関するhiro_yのブックマーク (59)

  • Library for simple drawing with jQuery - OpenStudio Communication sur Internet

    Implantés dans le Midi de l’Auvergne et spécialistes des technologies libres et accessibles, nous vous accompagnons dans votre communication sur internet.

    hiro_y
    hiro_y 2007/11/16
    Canvas/SVGを利用、さまざまな図形を描画するjQueryプラグイン。
  • MooCanvas, MooTools-style excanvas

    Introduction MooTools Canvas is a byproduct of Google's Excanvas and a script by Ralph Sommerer. In retrospect, I can't tell where one ends and one begins. Moreover, there hasn't been a single line of code that I haven't personally modified for performance, file-size reduction, or programming-style maintenance. Thanks to MooTools, the new Canvas class is: small, modular, and lightweight. Top Examp

    hiro_y
    hiro_y 2007/08/21
    MooToolsベースのクロスブラウザなCanvasライブラリ。
  • Dragan Your Tree

    Pure CSS Menu – light, fast, easy to make, SEO Friendly This is my favorite technique for making CSS rollover menus. Its a combination of image replacement technique, and pure CSS list menus. There is no javascript, and beneath it is valid XHTML code, so you don’t need to worry about SEO performance If your […]

    hiro_y
    hiro_y 2007/08/10
    Canvasを使って立体的なグラフを描画。
  • SIMILE | Timeplot

    Timeplot has graduated! The Timeplot project has graduated and moved on with its life. Visit the new home page for more information on how to join the new mailing lists, synch with the new code repositories, issue tracking, etc. Please excuse our mess during the transition. Timeplot is a DHTML-based AJAXy widget for plotting time series and overlay time-based events over them (with the same data f

    hiro_y
    hiro_y 2007/08/01
    タイムラインにグラフを表示、canvasを使用。
  • iUI

    hiro_y
    hiro_y 2007/07/16
    iPhoneぽいUIを実現、Canvasを使用。
  • Glossy.js (now with IE 6/7 support)

    Initialisation class "glossy" vary the radius by adding iradius followed by the desired radius in percent of half of the smaller picture dimension: Corner radius class "iradius25" - min=20 max=50 default=25 vary the shadow by adding noshadow: Noshadow class "noshadow" - default=false vary the background by adding ibgcolor followed by the desired color as hex: Background color class "ibgcolor" - mi

    hiro_y
    hiro_y 2007/06/22
    画像を立体風に見せる、canvasを使用、IEにも対応。
  • Instant.js (now with IE 6/7 support)

    Download instant.js and include it into your webpage. // only if you want to use the annotation feature... <script type="text/javascript" src="cvi_text_lib.js"></script> // ...else this one only... <script type="text/javascript" src="instant.js"></script> Initialisation class "instant" vary the shadow by adding ishadow followed by the desired opacity in percent: Shadow opacity class "ishadow" - mi

    hiro_y
    hiro_y 2007/06/17
    写真/画像にポラロイド風の傾き/ドロップシャドウを付加、Canvasを使用。
  • Javascript Flickr Slideshow | Error Coding

    hiro_y
    hiro_y 2007/06/17
    Flickrの写真をスライドショー、Canvasを使用。
  • corner.js (with IE 6/7 support)

    corner.js 2.1 allows you to add corners (and also shading and shadow) to images on your webpages (alternatively: glossy.js). It uses unobtrusive javascript to keep your code clean. It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing. CVI-lab: Get a fast impression of the effects and their illu

    hiro_y
    hiro_y 2007/04/20
    Canvasを利用、画像を角丸などに加工して表示するライブラリ。
  • JavaScript で画像処理! canvas を使ってみよう - WebOS Goodies

    前述のとおり canvas 要素は Web ページ内に空の画像領域を確保します。感覚としては画像ファイルを指定しない img 要素のようなもので、Web ページ上での扱いもほぼ同じです。画像がないので src 属性がなく、代わりに width, height 属性で描画領域のサイズを明示しなければなりません。また、JavaScript で描画対象の canvas を特定するための id 要素を指定するのが普通です。例えば、150x150 ピクセルの描画領域を確保するには、以下のように記述します。 <canvas id="example_canvas" width="150" height="150"></canvas> 閉じタグを忘れると以降の内容が表示されなくなるので注意してください。詳細は後述しますが、canvas 要素内のテキストはブラウザが canvas をサポートしていないときの

    hiro_y
    hiro_y 2007/04/19
    Canvasに関する情報まとめ。
  • 技術日記@kiwanami - ふつうのドローツール

    昨年のcanvas祭りの時にネタとして披露した「ふつうのドローツール」。各方面の許可も出ました。MITでどうぞ。 JSDraw ポイントは、 図形を素直にクラスと継承で表現 イベントの処理をステートパターンで素直に実装 図形のシリアライズ機構を実装 図形と文字が同居 という感じ。 全部で1000行を超えているけども、図形が5個もあるし、後半は無駄にsetter/getterとかも多いし、正味はそんなに大きくないかなと。プログラムの中心は 195行目の paint 関数辺り。 先の勉強会でもJavaScriptでのアプリケーション開発のノウハウという点が大いに議論にもなったということで、少し大きなプログラムをJavaScriptで開発するときの参考になればと思います。 それで、次はいつかなと楽しみにしつつ、こんな時間まで起きていなければいけない現実とも戦いつつ・・・。

    技術日記@kiwanami - ふつうのドローツール
    hiro_y
    hiro_y 2007/04/19
    JSDraw、Canvasを利用したドローツール、MITライセンス。
  • アシアルブログ

    2018-12-21 経済産業省『未来の教室』実証事業の一環として宮崎県立日南振徳高等学校で『農業IoTシステム自作』講座を開催しました MonacaEducation担当の岡です。経済産業省『未来の教室』実証事業の一環として宮崎県立日南振徳高等学校の生徒達とビニールハウスなどの温度湿度をクラウドに記録、スマートフォンやタブレットなどのモバイル端末からグラフとして情報を確認できるようなシ… 経済産業省『未来の教室』実証事業の一環として宮崎県立日南振徳高等学校で『農業IoTシステム自作』講座を開催しました 2018-12-14 IT健保(関東ITソフトウェア健康保険)のお得な活用方法について調べてみた はじめまして、諸井です。 マーケティングや営業のフロント・バックオフィス全般を担当しています。 入社して3年弱、嬉しかったことはいくつかあるのですが、そのひとつは関東ITソフトウェア健康保険

    hiro_y
    hiro_y 2007/04/13
    excanvas.jsを利用して円グラフを描画するサンプル。
  • Canvas tutorial - MDC

    このチュートリアルは、 <canvas> 要素を使用して二次元のグラフィックを描画する方法を、基から説明します。ここでの例は、キャンバスで何ができるかを明確に示すものであり、独自のコンテンツを作成するためのコードスニペットも提供しています。 <canvas> は HTML の要素であり、スクリプト(ふつうは JavaScript)を使ってグラフィックを描くことができます。これは例えば、グラフを描いたり、写真を合成する、または簡単なアニメーションを(あまり簡単ではないものも)作成したりすることができます。このページにある画像は、このチュートリアルで作成する <canvas> の実装の例を示しています。 <canvas> は ApplemacOS Dashboard のために WebKit に初めて導入した後、ブラウザーに実装されました。現在は、あらゆる主要ブラウザーが対応しています。

    Canvas tutorial - MDC
    hiro_y
    hiro_y 2007/03/25
    Canvasに関するドキュメント。
  • Plotrリファレンス

    Plotrは折れ線グラフや棒グラフ、円グラフを表示するライブラリです。このライブラリを利用するにはprototype.js バージョン1.5が必要です。 Plotrライブラリは描画するグラフによって分かれていますが、コアとなるPlotr.jsファイルのみ読み込めば動作します。また、一部のブラウザではグラフが表示されない場合もあります。 version 0.1.3 リファレンス version 0.1.4 リファレンス

    hiro_y
    hiro_y 2007/03/25
    prototype.js/Canvasを利用したグラフ描画ライブラリ、Plotrのリファレンス。
  • http://solutoire.com/plotr/

    hiro_y
    hiro_y 2007/03/25
    Canvasを利用したグラフ描画ライブラリ。要prototype.js。
  • Ajax3d Demo

    A simple demo of the Ajax3d engine for Javascript. Use the left mouse button to fly, and the right mouse button to shoot. Tested on Firefox 1.5 and Opera 9.0 for Windows and Linux. More content here real soon now. In the meantime why not download the release package or mail me.

    hiro_y
    hiro_y 2007/03/09
    canvasを使って3D表示。
  • 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,

    hiro_y
    hiro_y 2007/03/07
    VMLを利用、IEでCanvasを利用可能にするライブラリ。Google提供。
  • JavaScriptで図形を描くHTML要素「Canvas」の実例

    JavaScriptを使ったAJAXが昨年前半まで大いに注目を集めていましたが、その根になったJavaScript自体は古くからあり、AJAXというのは新しい応用法みたいな側面が非常に強かったのが特徴です。 しかし今回紹介する「Canvas」要素はそういうのとは明らかに一線を画しています。グラフの描画、写真合成、アニメーションなどが可能で、実際にはMac OS X のDashboardに初導入されています。そのため、サポートしているブラウザはSafariとFirefox 1.5以降のGecko1.8ベースのブラウザ、それからOpera9となります。また、この「Canvas」要素は「HTML 5」としても知られるWhatWG Web applications 1.0仕様の一部でもあるそうです。 といろいろ書いても実感がわかないと思うので、いろいろな実例を見てみましょう。 まずは簡単なフレー

    JavaScriptで図形を描くHTML要素「Canvas」の実例
    hiro_y
    hiro_y 2007/01/11
    グラフの描画、写真合成、アニメーションなどが可能なCanvasについて。
  • Alastair Tse - liquidx

    A design-conscious software-engineer who used to code for food and shelter, but now builds teams of smarter people who build amazing things. I care about #graphics, #design, #craft, #architecture, #typography, #photography, #dataviz, #ux, #japan and #mobile. I am currently an Engineering Manager on Google Maps, focused on opinions, imagery, design, and iOS. Previously at Google, I was the Engineer

    hiro_y
    hiro_y 2006/08/15
    グラフ描画ライブラリ、HTML Canvas/SVG、要MochiKit。