HTML5のcanvasを使ったお絵かきツール詳説
HTML5のcanvasを使ったお絵かきツールを勉強がてら作ってみました。下記の画像リンクをクリックすればサンプルページにジャンプします。 サンプル 以下、サンプルのHTMLとJavaScript（jQuery）を使って、canvasのお絵かきツールについて解説します。 探しきれてないだけと思いますが、お絵かきツールのjQueryでの実装が見つからなかったので、自力で書いてみました。いろいろ間違ってたらすいません。 １．HTML サンプルのHTMLは次のようになっています。 <canvas width="500" height="400">お使いのブラウザはHTML5のCanvas要素に対応していません。</canvas> <ul> <li style="background-color:#000"></li> <li style="background-color:#f00"></li>
iPhone/Android/PC 対応。jQuery で書くタッチイベント
こんにちは！プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS / Android で動作確認済み。 タッチできない PC の場合、マウスで動く。 この３点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし
HTML5 CanvasをjQueryライクに操作できるプラグイン「jCanvas」
はじめに HTML5において追加されたCanvasは、HTMLとJavaScriptを用いてWebページ内に図形や線などを描画できる機能で、動画や音楽を再生するvideoタグやaudioタグなどとともに、HTML5の代表的な機能としてしばしば紹介されます。 Canvas機能を用いるとHTMLのcanvas要素で定義された領域に対してJavaScriptで描画処理を行えます。以下のような描画を行うAPIが提供されています。 線（直線、曲線） 図形（四角形、円） 色とスタイル（単色、グラデーション、影） 文字の描画（サイズ、フォント、色の指定） 変形（拡大、回転、マトリクス変換） しかし、Canvas描画処理のJavaScript APIはグラフィックス処理独特の記述方法となっており、学習のハードルはそれなりに高いものになっています。 今回紹介するjCanvasは、HTML5 Canvasの機
JavaScript Animated Typing with Typed.js | by Matt Boldt
Another demo made with love by Matt Boldt. Installation # With NPM npm install typed.js # With Yarn yarn add typed.js # With Bower bower install typed.js Setup var typed = new Typed('.element', { strings: ["First sentence.", "Second sentence."], typeSpeed: 30 }); The README on GitHub is going to be very helpful for any questions, features, or use cases. end If you're using this, let me know! I'd l
jQuery ページロード後にJavaScriptを実行する方法 readの代わり$(function(){}や$()を使用する
このドキュメントの内容は、以下の通りです。 $(foo); $(function(){}); $(document).ready(function(){}); Webページ（ドキュメント）をロード後された後に、JavaScriptで初期化処理を実行することがあります。 jQueryでは、いくつかの方法が提供されています。 $(関数)や$(function(){}); は jQuery v1.2からの方法です。 $(foo); 非常に短く書くには、 $(関数) を利用します。 $(関数) の関数部分して指定した関数が実行されます。 function foo () { alert ('foo'); } $(foo); $(関数) は複数の登録を行っても上書きされません。 function foo1(){ alert ('1'); } function foo2(){ alert ('2');
jQuery：マウスオーバーやクリックで背景画像を入れ替えてみる
jQueryを使って、マウスオーバーやクリックをしたときに、 背景画像を変更するという案件が入りそうだったので、 実験的に作ってみました。 マウスオーバーしたときや、クリックした時に、 背景の画像が変わります。 jQueryを使えば基本的な事だけでできることです。 背景画像が変わるサンプル とりあえず作ってみたのでサンプルをみてください。 サンプルのソースは重要部分だけ抜粋してのせておきます。 ■ HTML <div id="content"> <ul> <li><a href="images01.jpg"><img src="m_images01.jpg" alt="背景" /></a></li> <li><a href="images02.jpg"><img src="m_images02.jpg" alt="背景" /></a></li> <li><a href="images03.
jQuery UI
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. What's New in jQuery UI 1.14? Compatibility with recent jQuery versions (up to 3.7): Usage of deprecated jQuery API
Google Libraries API
Stay organized with collections Save and categorize content based on your preferences. The Google Hosted Libraries is a stable, reliable, high-speed, globally available content distribution network for the most popular, open-source JavaScript libraries. Google works directly with the key stakeholders for each library effort and accepts the latest versions as they are released. Libraries To load a
jQuery UIのCDNを利用するときのURLまとめ
jQuery UIをCDN経由で利用する場合のjs、cssファイルの指定方法のまとめです。 まずは結論です。以下のようにURLを記述することで、それぞれのjs、cssファイルを読み込むことができます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/themes/redmond/jquery-ui.css"> <scr
Prototype.jsとjQueryのベンチマーク速度比較:phpspot開発日誌
Claudio's personal hideout: Prototype and jQuery benchmarked Disclaimer: this benchmarks are not meant to demonstrate anything. This is not a “A is better than B” sort of thing. I think this is one of my first (no, uhm, it’s THE first) benchmark I ever did, so it is all but rigorous.Prototype.jsとjQueryのベンチマーク速度比較。 どちらもそこまで大差があるわけではないですが、両者ともAjaxフレームワークでは人気のライブラリなので面白い比較ですね。 体感ではほとんど変わらないはずなので、速度面で
Claudio Cicali
Welcome I am Claudio and these are my blog posts. You may also want to know me a little bit better or just contact me. Enjoy your stay! Pinned posts The tale of a seasoned developer — Part I The tale of a seasoned developer — Part II Something funny about self-closing tags Latest 5 posts 🇮🇹 Una settimana a New York 11 Mar 2024 – Dopo una visita di una settimana nella città che non dorme mai, ho
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA