手机特效html,支持移动手机的HTML5 Canvas刮刮卡特效

这是一款支持移动手机的HTML5 Canvas刮刮卡特效。该刮刮卡特效通过Canvas来前后两张图片的刮卡效果，支持桌面端和移动端。

使用方法

HTML结构

使用

元素来制作刮卡。

......

CSS样式

为刮卡设置基本的CSS样式，将canvas元素的背景设置为初始背景图片。

#bridge {

display: block;

margin: 0 auto;

background-image: url("../img/scratch-2.jpg");

background-image: -webkit-image-set(url("../img/scratch-2.jpg") 1x, url("../img/scratch-2x.jpg") 2x);

background-size: cover;

width: 100%;

max-width: 750px;

height: auto;

cursor: crosshair;

cursor: url(../img/circular-cursor.png) 53 53, crosshair;

}

#bridgeContainer {

text-align: center;

font-family: Avenir, sans-serif;

}

#bridgeContainer figcaption {

margin-top: 2rem;

}

JavaScript

通过下面的js代码来实现在canvas中绘制刮卡效果。

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 = 'img/';

img.filename = 'scratch-1.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);