HTML5 캔버스 태그는 스크래치 카드 effect_html5 튜토리얼 기술을 구현합니다.

스크래치 카드를 사용해 본 적이 있나요? 우연히 상을 받을 수 있는 종류. 오늘은 HTML5 기술을 기반으로 한 스크래치 카드 효과를 공유하겠습니다. PC에서는 마우스를 누르고 있기만 하면 됩니다. 모바일에서는 손가락을 누른 채 레이어를 살짝 긁어내면 실제 스크래치를 시뮬레이션할 수 있습니다. 효과.

소스 코드 다운로드: 다운로드하려면 클릭

HTML5 Canvas와 그것이 제공하는 API를 결합하여 Canvas 요소에 회색 마스크 레이어를 그린 다음 사용자의 마우스 움직임과 제스처를 감지하여 투명한 그래픽을 그려서 Canvas 배경을 볼 수 있도록 합니다. 실제 사진은 스크래치 카드 효과를 얻을 수 있습니다.

HTML

페이지에 캔버스 태그 요소만 추가하면 되고 나머지는 JavaScript에 따라 다릅니다. 캔버스 요소는 HTML5에 고유한 요소이며 HTML5를 지원하는 최신 브라우저에서 실행됩니다.

코드 복사

코드는 다음과 같습니다.

자바스크립트

우선 페이지의 마우스 선택 및 드래그 이벤트를 비활성화해야 합니다. 즉, 선택 작업을 실행하지 않아야 합니다.

코드 복사

코드는 다음과 같습니다.

var bodyStyle = document.body .style;
bodyStyle.mozUserSelect = 'none';
bodyStyle.webkitUserSelect = 'none';

그런 다음 이미지 클래스를 정의하고 캔버스 요소를 설정합니다. 및 위치 속성. 이 예에서는 두 개의 무작위 사진을 사용하고 매번 무작위 사진을 배경으로 새로 고칩니다.

코드 복사

코드는 다음과 같습니다.

var img = new Image( );
var canvas = document.querySelector('canvas');
canvas.style.BackgroundColor='transparent';
canvas.style.position =
var imgs = [ 'p_0.jpg','p_1.jpg'];
var num = Math.floor(Math.random()*2)
img.src =

그런 다음 이미지가 로드된 것으로 감지되면 먼저 몇 가지 속성과 기능을 정의합니다. eventDown()은 press 이벤트를 정의하는 데 사용됩니다. release 이벤트를 정의합니다. eventMove()는 누를 때 좌표 변위를 구하고 arc(x, y, 10, 0, Math.PI * 2)를 통해 작은 점을 그리는 이동 이벤트를 정의합니다.

코드 복사

코드는 다음과 같습니다.

img.addEventListener('load ', function (e) {
var ctx;
var w = img.width,
h = img.height;
var offsetX = canvas.offsetLeft,
offsetY = canvas.offsetTop ;
var mousedown = false;

function layer(ctx) {
ctx.fillStyle = 'gray'
ctx.fillRect(0, 0, w, h); > }

function eventDown(e){
e.preventDefault();
mousedown=true;

function eventUp(e){
e .preventDefault( );
mousedown=false;
}

function eventMove(e){
e.preventDefault()
if(mousedown) {
if( e.changedTouches ){
e=e.changedTouches[e.changedTouches.length-1];
}
var x = (e.clientX document.body.scrollLeft || e.pageX) - offsetX || 0 ,
y = (e.clientY document.body.scrollTop || e.pageY) - offsetY || 0
with(ctx) {
startPath()
arc(x) , y, 10, 0, Math.PI * 2);//점 그리기
fill()
}
}
}

//...
} );


마지막으로 캔버스를 통해 위 함수를 호출하고, 그래픽을 그리고, 터치 및 마우스 이벤트를 수신하고, 해당 함수를 호출합니다.

코드 복사코드는 다음과 같습니다.

img.addEventListener('load', function(e) {
//..이전 코드에서 이어짐
canvas.width=w;
canvas.height=h;
canvas.style.BackgroundImage='url(' img.src ')';
ctx=canvas.getContext('2d')
ctx.fillStyle='transparent'
ctx.fillRect (0 , 0, w, h);//직사각형 그리기
layer(ctx);

ctx.globalCompositeOperation = 'destination-out'

canvas.addEventListener(' touchstart', eventDown);
canvas.addEventListener('touchend', eventUp);
canvas.addEventListener('touchmove', eventMove)
canvas.addEventListener('mousedown', eventDown); > canvas.addEventListener('mouseup', eventUp);
canvas.addEventListener('mousemove', eventMove)

데모에서 전체 코드를 다운로드할 수 있습니다. 실제 필요에 따른 배경 프로그램과 데이터베이스로 실제 스크래치 카드 프로그램
을 완성합니다.