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)

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