canvas上での画像にリンクを貼る方法 - 生涯未熟
結構探したけどどこにもあまり書いてなかったので備忘録としてまとめることに。 まず、canvasを作成するところは色んなところで書かれているので割愛。 画像を描画する部分ですが、一応私の方法を書くと。 var img = new Image(); img.src = "画像URL";で画像の準備を行い、 ctx.drawImage(img, x座標,y座標);canvasオブジェクトに先ほどの画像をdrawImageする。 これで画像の描画終わり。 肝心のリンクを貼る方法ですが、canvasのオブジェクトを作った下辺りに canvas.addEventListener("mousedown", mouseDownListner, false);とやらを埋め込みます。 そして、関数にmouseDownListner(e)というのを作ります。 function mouseDownListner(
HTML5のCanvasに描かれる「アートスクリプティング」とにかく美しいJavaScript表現のまとめ28個！
動くぞ！きれいだぞ！ ﾍ(･_･ﾍ) とにかく痩せたい、HTMLファイ部のほんだです。 jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアを担当している者です。 jsdo.it、ユーザー数 5万人突破！ 手前味噌ですが、このたび弊社運営のHTML5コード共有コミュニティ「jsdo.it」が、 ユーザー数 5万人を突破しました！（わーい！） 今回の記事では、jsdo.itのユーザー5万人を記念して、 HTML5 Canvas に芸術的な動きを表現しているJavaScriptコード「アートスクリプティング」を特集します！ あまり一般的ではないようですが、「アートスクリプティング」という言葉でくくってみました。 Canvasアートスクリプティング特集！ 説明不要！ 気になったコードは是非のぞいてみてください！
lake.js
How does it work? Like this: <script src="jquery.js"></script> <script src="lake.js"></script> <script> $(function() { $('#lake-img').lake({ 'speed': 1, 'scale': 0.5, 'waves': 10 }); }); </script> ... <img id="lake-img" src="lake.png" style="display: none;"/> Lake.js takes an img element and inserts a canvas element displaying the image and its flipped reflection directly after the img element. Th
『HTML5 Web Applicationのつくりかた』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 サイバーエージェントでフロントエンドの開発をしております 原(@herablog) です。 スマートフォン版 アメーバピグ新規作成で使用した技術について触れたいと思います。 #ちなみにこの記事ではHTML5を「最新ブラウザ向けのwebアプリケーション作成技術」というかなり広い解釈で使用していますので予めご理解ください。 今までDesktop・Android向けはFlashで作成されていたのですが、今回はiOS, Androidともに対応したいということで、HTML5でできるところまでやってみることにしました。 No Lag作るにあたり
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
