1Draw things in PaintCode. You can also import PDF, SVG, PSD, AI and EPS documents. 2Get the Generated code. Choose Swift, Objective-C, Java, C#, JavaScript or SVG.
jQueryのプラグインを使えば、画像に様々な効果を加えたり、アニメーションさせて表示させたりいろんなことができます。 そんなプラグインは出揃った感がありますが、今回とてもユニークなプラグインを見つけたのでご紹介したいと思います。 「銀はがし」ができるプラグイン! 銀はがしといえば、皆さんご存知の宝くじなどでよくあるスクラッチカードがありますが、これと同じようなことをjQueryでできるようにしてくれるプラグイン「wScratchPad」です。 「wScratchPad」を使えば、画像をマスクした状態で表示しておき、マウスで削っていくと徐々に中の画像を見せるようなことができます。 簡単にスクラッチカードを削る間隔を味わうことができますよw デモページにアクセスすると試すことができます。 最初はマスクされて画像が何も表示されていません。 マウスで削っていくと隠れている画像が見えてきます。 用
What is is? This is a 100% JavaScripted app implemented in one day. Please browse this page with latest Chrome, Safari, or Firefox. Please contact to fukatsu@gmail.com if you have any question.
MozillaのJavaScriptエバンジェリストJohn Resig氏が、自分の携わった二つのプロジェクトで新たな動きがあったことを報告している(『New Processing.js and Sizzle.js Sites』)。 一つはProcessing.jsで、JavaScriptを使用してHTML5のCanvas要素上に形を描き、画像を操作するためのライブラリである。FlashやJavaアプレットに頼らずアニメーションやインタラクティブなUIを作成することができる。Firefox、Safari、Opera、Google Chromeをサポートし、IEでもExplorer Canvasを使って動作させることが可能だ。 サイトのフロントページがProcessing.jsのデモになっており、次に掲げるの画像の中央下に見られる二重円は、拍動するようなアニメーションを見せながら、マウスカー
もうすぐクリスマスシーズンなんですかね?本間です。 巷で話題のイケメンホイホイ(以下イケホイ)ですが、このたびiPhone用サイトがオープンしました。 それにあわせて新機能も搭載!イケメン写真にタグを付ける機能と、iPhoneでぼんやり眺めているだけで楽しいビューア機能です。 タグ機能はPC版にも搭載されましたので、ぜひぜひみんなで色んなイケメンにタグを付け合ってくださいね。 タグが付くことで、オススメの精度が上がりますよ! ビューア機能は、自分がゲットしたイケメンズがiPhone上で次から次へと表示される機能です。 オフラインでも表示できる機能付き! 電車の中で見るも良し、卓上に置いて眺めるも良しです。 あなた好みのイケメンがゾロゾロ。イケメンホイホイのサイトはこちら! …うーん、ユーザ層がかぶらなそうだな、この記事。 さてさて、本題はHTML5の機能を使った画像のオフライン表示について
きっかけ canvasタグ上に描いた絵を保存しようとしたら、 意外に情報が見つからず苦労したんで、載せときます。 canvas? まず、canvasやHTML5についての仕様は、以下のサイトを見てください http://www.html5.jp/ 流れ 今回は、フリーハンドで描いた絵を保存します。 canvasタグを用意 お絵かき 画像情報をサーバに送り、DBに保存 DBから画像情報を取り出し表示 (゚Д゚)ウマー なお、DB関係の記述は省略します。 canvasタグを用意 <html> <head> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/canvas.js" type="text/javascript"></script> <style type="text/css">
何のひねりもないiPhone用のお絵かきアプリです。 先日公開した「ii」もはじめはcanvasタグを使って作ろうと思っていたのですが、文字が使えないことがわかって急遽、背景と文字の合成はPHPのGDで行いました。 もう少しcanvasタグを勉強したかったので、とりあえずお絵かきアプリを作って見ました。保存もできないし、色も変えられない、ただ線を描くだけですけど、指でタッチして書くというのはまた一味違いますね。この気軽さがWEBアプリのいいとこじゃないでしょうか。 iPhoneのお絵かきWebアプリ はじめて動画でとってみました。 ずいぶん簡単なんですね。 ソースもシンプル。特に凝ったことはしてなくて、基本的に、 canvas.beginPath(); canvas.moveTo(x1,y1); canvas.lineTo(x2,y2); canva
ソフトバンクに2年間で67万円払っている 次女と末っ子の長男はもう中学生。1年半後には長男が高校生なのでその時には家族全員がスマホ持ちとなろう。 かねがねケータイ代が高いと思いつつ、なんだかんだここまで来たけど、近々次女と長男までスマホを持つことを考えれば、格安スマホへの乗り換えは必須と考えた次第。 ソフトバンクの内訳 現在ソフトバンクで4回線契約しており内訳はというと、 オレ ... 9000円 iPhone 5S で契約(実際はシムフリー版の6+を使用中) 妻 ... 8000円 iPhone 5S で契約 長女 ... 5000円 iPhone 5 で契約(オレの旧機種で契約。実際は空きになってるオレの5Sを使用中) 次女 ... 3000円 ガラケーで契約 通話料 ... 1000円くらいかな ざっくりこんな内訳で、消費税を合わせると毎月2.8万円ほどかかっている。 この2年で実際
リリースしました。 uupaa-selector.js Version 2.0 (ChangeLog) uupaa-mutationevent.js Version 0.1 (ChangeLog) uupaa-excanvas.js Version 0.1 (ChangeLog) uupaa-detect.js Version 1.0 (ChangeLog) uupaa-color.js Version 3.0 (ChangeLog) 内訳は世界初が1つ。世界最速が1つ。おまけが3つ。 以前は「各ライブラリが単体で動けばいいや」的な実装でしたが、今回は「組み合わせることを前提に」書き直しています。 順番に意味があるので、順番間違えると動きません。 uupaa-excanvas.js は dual license(MIT + Apache)にしました。他とは違うのでお気をつけて。 もはや素の
「Silverlight で HTML5::Canvas を実現できないか」から早5日(うち3日はサボり)。ぼちぼち動くようになってきました。 今回書いたライブラリは、Silverlightがインストールされている環境ではSilverlightを使い、インストールされていなければ、VMLでレンダリングします。 現在の実装状況 左上が IE6 + Silverlight2 でレンダリング、右上がFirefox3.0.3, 右下がSafari3.1.2 パターンブラシを実装しきれていませんが、あとは大体いけてます。 実装済みのメソッド CanvasRenderingContext2D clearRect, beginPath, moveTo, lineTo, bezierCurveTo, quadraticCurveTo, rect, strokeRect, fillRect, closePa
Wednesday, May 21, 2008 36 comments Javascript Super Mario Kart Labels: canvas, games, javascript Seems I just can't let go of Mario. This is a prototype of a Javascript Mario Kart-like racing game. It uses the canvas element to do most of the rendering and should work in both FF2, FF3, Opera(9.27 and 9.5) and Safari 3.1+. There are a few glitches in Safari (at least in 3.1.1) in the kart sprites,
HTML5.JPオリジナルのJavaScriptライブラリを公開していきます。ご自由にライブラリをダウンロードして貴サイトにてご活用ください。 <meter> polyfill (jQuery プラグイン) <meter> polyfill は、HTML5 で新たに導入された meter 要素をサポートしていないブラウザーでも meter 要素がレンダリングされるようにする jQuery プラグインです。Chrome や Opera など、すでに meter 要素をサポートしているブラウザーには何も作用しません。このプラグインは、Internet Explorer 6, 7, 8, 9 でも動作します。 html5detector (Google Chrome Extentions) html5detector は、表示されているページが HTML5 でマークアップされていれば、アドレスバ
Not support canvas. どのようにやっているかというと単に円上に画像を動かしているだけです。 残像がつくのはcanvasではデフォルトでは背景画像はクリアされません。 そこで、透明度0.5の白画像を上から書くことで前回の移動ポイントの画像が薄く残る、と言うことです。 これを利用すればリングメニューなどをFirefoxのExtension等で書くことが可能になります。
今年4月に行なわれたMozillaParty7.0において、いくつか有用な情報を得ることができたが、中でもcanvas 要素の toDataURL メソッドで取得した data:URL をファイルへ保存するという Taken さんの情報は、 ScrapBook で保存したWebページのコレクションをサムネイル画像によって一望するというプランを一気に実現へと近づけることができるありがたいものであった。その具体的な方法はTaken SPC : Mozilla Party JP 7.0 に行ってきましたのポストでも説明されているが、これを利用して現在ブラウザに表示されているWebページのスクリーンショット(今回はサムネイルではなく、原寸大のスクリーンショット)をPNG画像として保存する機能を実装してみる。 (1) XUL html:canvas要素を chrome://browser/conte
Prototype Graphic Framework This open-source framework is developed for my new project NeoMeeting. Prototype.jsベースのグラフィックス描画フレームワークの紹介。 四角形、円形、多角形などを SVG/VML/Canvas の方式で描画することが出来ます。 コードは次のようにオブジェクト指向でシンプルに記述できます。(SVG描画の場合) // Create an SVG renderer var renderer = new SVGRenderer("whiteboard"); // Create a rectangle with some attributes like color and bounds var rect = new Graphic.Rectangle(rendere
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く