최근에는 HTML5에 대한 모바일 장치의 지원이 향상됨에 따라 자주하는 활동입니다. 저도 최근에 H5 콘텐츠를 읽고 직접 구현했습니다.
문자열 , 두 번째 캔버스는 그림이나 단색으로 채울 수 있는 코팅을 표시하는 데 사용됩니다. 두 번째 캔버스는 두 번째 캔버스 를 덮습니다. 하나. 캔버스를 클릭하거나 문지르면(마우스를 클릭하고 드래그) 첫 번째 캔버스에 내용이 보이도록 클릭한 영역을 투명하게 만들어 스크래치 효과를 줍니다. 3. 구현
(1) Lottery 클래스 정의function Lottery(id, cover, coverType, width, height, drawPercentCallback) { this.conId = id; this.conNode = document.getElementById(this.conId); this.cover = cover || '#CCC'; this.coverType = coverType || 'color'; this.background = null; this.backCtx = null; this.mask = null; this.maskCtx = null; this.lottery = null; this.lotteryType = 'image'; this.width = width || 300; this.height = height || 100; this.clientRect = null; this.drawPercentCallback = drawPercentCallback; }매개변수 설명: id: 스크래치 컨테이너의 ID
변수
:Match
clientRect: lottery
getBoundingClientRect() 값을 기록하는 데 사용됩니다. 마스크 요소
(2) 스크래치 컨테이너에 두 개의 캔버스를 추가하고 2D 컨텍스트
this.background = this.background || this.createElement('canvas', { style: 'position:absolute;left:0;top:0;' }); this.mask = this.mask || this.createElement('canvas', { style: 'position:absolute;left:0;top:0;' }); if (!this.conNode.innerHTML.replace(/[\w\W]| /g, '')) { this.conNode.appendChild(this.background); this.conNode.appendChild(this.mask); this.clientRect = this.conNode ? this.conNode.getBoundingClientRect() : null; this.bindEvent(); } this.backCtx = this.backCtx || this.background.getContext('2d'); this.maskCtx = this.maskCtx || this.mask.getContext('2d');를 가져옵니다. 여기에 사용되며, 추후 소개할
if (this.lotteryType == 'image') { var image = new Image(), _this = this; image.onload = function () { _this.width = this.width; _this.height = this.height; _this.resizeCanvas(_this.background, this.width, this.height); _this.backCtx.drawImage(this, 0, 0); } image.src = this.lottery; } else if (this.lotteryType == 'text') { this.width = this.width; this.height = this.height; this.resizeCanvas(this.background, this.width, this.height); this.backCtx.save(); this.backCtx.fillStyle = '#FFF'; this.backCtx.fillRect(0, 0, this.width, this.height); this.backCtx.restore(); this.backCtx.save(); var fontSize = 30; this.backCtx.font = 'Bold ' + fontSize + 'px Arial'; this.backCtx.textAlign = 'center'; this.backCtx.fillStyle = '#F60'; this.backCtx.fillText(this.lottery, this.width / 2, this.height / 2 + fontSize / 2); this.backCtx.restore(); }(4) 두 번째 A 캔버스 그리기두 번째 캔버스도 이미지나 색상으로 채울 수 있습니다. 여기서 난관이 있습니다. 즉, 마우스 클릭 영역을 투명하게 만드는 방법이 뭔가요? 대답은 여기에 있습니다:developer.mozilla.org/en/docs/Web/Guide/HTML/Canvas_tutorial/Compositing즉, MaskCtx의
을 그릴 것이므로 두 번째를 그립니다. 캔버스의 코드는 다음과 같습니다.
this.resizeCanvas(this.mask, this.width, this.height); if (this.coverType == 'color') { this.maskCtx.fillStyle = this.cover; this.maskCtx.fillRect(0, 0, this.width, this.height); this.maskCtx.globalCompositeOperation = 'destination-out'; } else if (this.coverType == 'image'){ var image = new Image(), _this = this; image.onload = function () { _this.maskCtx.drawImage(this, 0, 0); _this.maskCtx.globalCompositeOperation = 'destination-out'; } image.src = this.cover; }
여기서 resizeCanvas는 캔버스의 크기를 변경하는 도구 방법입니다. globalCompositeOperation 设置为 destination-out ,详细的用法请参考上面给出的链接。
key
down 및 mousemove 이벤트입니다. 또한 PC-WEB 모드에서는 mouseup 이벤트를 문서에 바인딩해야 합니다. 마우스를 눌렀습니다. 코드는 다음과 같습니다.bindEvent: function () { var _this = this; var device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase())); var clickEvtName = device ? 'touchstart' : 'mousedown'; var moveEvtName = device? 'touchmove': 'mousemove'; if (!device) { var isMouseDown = false; document.addEventListener('mouseup', function(e) { isMouseDown = false; }, false); } this.mask.addEventListener(clickEvtName, function (e) { isMouseDown = true; var docEle = document.documentElement; if (!_this.clientRect) { _this.clientRect = { left: 0, top:0 }; } var x = (device ? e.touches[0].clientX : e.clientX) - _this.clientRect.left + docEle.scrollLeft - docEle.clientLeft; var y = (device ? e.touches[0].clientY : e.clientY) - _this.clientRect.top + docEle.scrollTop - docEle.clientTop; _this.drawPoint(x, y); }, false); this.mask.addEventListener(moveEvtName, function (e) { if (!device && !isMouseDown) { return false; } var docEle = document.documentElement; if (!_this.clientRect) { _this.clientRect = { left: 0, top:0 }; } var x = (device ? e.touches[0].clientX : e.clientX) - _this.clientRect.left + docEle.scrollLeft - docEle.clientLeft; var y = (device ? e.touches[0].clientY : e.clientY) - _this.clientRect.top + docEle.scrollTop - docEle.clientTop; _this.drawPoint(x, y); }, false); }
drawPoint: function (x, y) { this.maskCtx.beginPath(); var radgrad = this.maskCtx.createRadialGradient(x, y, 0, x, y, 30); radgrad.addColorStop(0, 'rgba(0,0,0,0.6)'); radgrad.addColorStop(1, 'rgba(255, 255, 255, 0)'); this.maskCtx.fillStyle = radgrad; this.maskCtx.arc(x, y, 30, 0, Math.PI * 2, true); this.maskCtx.fill(); if (this.drawPercentCallback) { this.drawPercentCallback.call(null, this.getTransparentPercent(this.maskCtx, this.width, this.height)); } }
이 비율을 어떻게 계산하나요? 사실 매우 간단합니다. getImageData 메소드를 사용하여 캔버스에 있는 직사각형의 픽셀 데이터를 지정할 수 있습니다. 각 픽셀은 rgba로 표시되고 칠해진 영역은 투명하므로 해당 값만 판단하면 됩니다. 알파 채널이 투명합니까? 코드는 다음과 같습니다.
getTransparentPercent: function(ctx, width, height) { var imgData = ctx.getImageData(0, 0, width, height), pixles = imgData.data, transPixs = []; for (var i = 0, j = pixles.length; i < j; i += 4) { var a = pixles[i + 3]; if (a < 128) { transPixs.push(i); } } return (transPixs.length / (pixles.length / 4) * 100).toFixed(2); }(8) 입구 init
을 호출하고 마지막으로 그리기 및 재설정을 위한 입구를 제공합니다.
init: function (lottery, lotteryType) { this.lottery = lottery; this.lotteryType = lotteryType || 'image'; this.drawLottery(); }이제 모든 키코드에 대한 설명이 끝났습니다.
위 내용은 HTML5 Canvas 실용적인 스크래치 효과의 세부정보 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!