キャンペーンサイトに使えそう！タグを使った画像のスクラッチ表現
元の画像のURLを書き換える形で、スクラッチ後に表示する画像のURLを指定します。 img.loc = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/'; の部分で、デフォルトの画像URLの内、書き換えない部分を指定します。 img.filename = 'calgary-bridge-2013.jpg'; の部分で、デフォルトの画像URLの内、書き換える部分を指定します。
var bridge = document.getElementById("bridge"), bridgeCanvas = bridge.getContext('2d'), brushRadius = (bridge.width / 100) * 5, img = new Image(); if (brushRadius < 50) < brushRadius = 50 >img.onload = function() < bridgeCanvas.drawImage(img, 0, 0, bridge.width, bridge.height); >img.loc = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/'; img.filename = 'calgary-bridge-2013.jpg'; if (window.devicePixelRatio >= 2) < var nameParts = img.filename.split('.'); img.src = img.loc + nameParts[0]+"-2x"+"."+nameParts[1]; >else < img.src = img.loc + img.filename; >function detectLeftButton(event) < if ('buttons' in event) < return event.buttons === 1; >else if ('which' in event) < return event.which === 1; >else < return event.button === 1; >> function getBrushPos(xRef, yRef) < var bridgeRect = bridge.getBoundingClientRect(); return < x: Math.floor((xRef-bridgeRect.left)/(bridgeRect.right-bridgeRect.left)*bridge.width), y: Math.floor((yRef-bridgeRect.top)/(bridgeRect.bottom-bridgeRect.top)*bridge.height) >; > function drawDot(mouseX,mouseY) < bridgeCanvas.beginPath(); bridgeCanvas.arc(mouseX, mouseY, brushRadius, 0, 2*Math.PI, true); bridgeCanvas.fillStyle = '#000'; bridgeCanvas.globalCompositeOperation = "destination-out"; bridgeCanvas.fill(); >bridge.addEventListener("mousemove", function(e) < var brushPos = getBrushPos(e.clientX, e.clientY); var leftBut = detectLeftButton(e); if (leftBut == 1) < drawDot(brushPos.x, brushPos.y); >>, false); bridge.addEventListener("touchmove", function(e) < e.preventDefault(); var touch = e.targetTouches[0]; if (touch) < var brushPos = getBrushPos(touch.pageX, touch.pageY); drawDot(brushPos.x, brushPos.y); >>, false);関連記事
綺麗なカウント付きシェアボタンを簡単に設置できるJS「Shr」 横幅に応じてメニュー数が変動するjQueryナビゲーション okayNav ページ上部にスクロールしても消えないお知らせエリアを表示する jQuery Sticky Alert オシャレなセレクト要素のデザインを実装できるjQueryプラグイン Select or Die コピペで使えるフォーム要素のチートシート ファビコンの上に数字アラートを表示するjsライブラリ Tinycon jQueryプラグイン「editableTableWidget」を使って、Table内のテキストのリアルタイム編集を可能にする方法 CSS3のアニメーション transition」の動作を確認できる「CSS3 Transitions Collection 30メールのヘッダーを簡単に解析できるGoogle公式ツール Messageheader
2015.12.03 2021.12.07
無料でダウンロードできる英語の筆記体フリーフォント102選（商用明記）
2016.06.10 2021.12.07
Photoshopでできる文字加工のチュートリアル50個まとめ
2016.12.03 2021.12.07
同人誌に使えるフリーフォント21選
2016.07.04 2021.12.07
写真に重ねた文字を見やすくデザインする9つのコツ
2016.04.18 2021.12.07
デザイナーの暇つぶし。色当てゲーム What the Hex?
2014.12.23 2021.12.07
有名企業のロゴをPNG、SVGで無料ダウンロードできるサイト - Instant Logo Search
2016.03.10 2021.12.07
これは便利！エクセルの表をブログやサイトに張り付けられるHTML形式の表データに一発で変換できるツール
2016.11.25 2021.12.07
【WordPress】W3 Total Cacheをアップデートしたら500エラーが発生、解決方法
2017.12.12 2021.12.07
求人情報（Job Postings）の構造化データをマークアップする方法