本篇文章為大家展示了怎么在JavaScript中使用canvas實現(xiàn)一個橡皮擦效果,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。
創(chuàng)新互聯(lián)專注于網(wǎng)站建設(shè)|網(wǎng)頁維護|優(yōu)化|托管以及網(wǎng)絡(luò)推廣,積累了大量的網(wǎng)站設(shè)計與制作經(jīng)驗,為許多企業(yè)提供了網(wǎng)站定制設(shè)計服務(wù),案例作品覆蓋成都塑料袋等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品,結(jié)合品牌形象的塑造,量身建設(shè)品質(zhì)網(wǎng)站。1.可以使網(wǎng)頁具有交互性,例如響應(yīng)用戶點擊,給用戶提供更好的體驗。 2.可以處理表單,檢驗用戶的輸入,并提供及時反饋節(jié)省用戶時間。 3.可以根據(jù)用戶的操作,動態(tài)的創(chuàng)建頁面。 4使用JavaScript可以通過設(shè)置cookie存儲在瀏覽器上的一些臨時信息。
html部分
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>My Canvas 0.1</title> <style type="text/css"> html,body,div,img{ margin:0; padding:0; } a,a:hover{ text-decoration:none; } .background{ width:100%; position:fixed; top:0; left:0; } </style> </head> <body> <img src="images/background.png" class="background resizeContainer"/> <div id="J_cover" class="resizeContainer"></div> <script type="text/javascript" src="js/zepto.js"></script> <script type="text/javascript" src="js/lottery.js"></script> <script type="text/javascript"> var canvas = { init : function(){ var self = this; var node = document.getElementById('J_cover'), canvas_url = 'images/cover.png', type = 'image'; var lottery = new Lottery(node, canvas_url, type, window_w, window_h, self.callback); lottery.init(); }, callback : function(){ $('#J_cover').hide(); } } var window_h, window_w; $(document).ready(function(){ window_w = $(window).width(); window_h = $(window).height(); $('.resizeContainer').width(window_w).height(window_h); canvas.init(); }); </script> </body> </html>
lottery.js
function Lottery(node, cover, coverType, width, height, drawPercentCallback) { //node:canvas的id,cover:上面一層的圖片地址,coverType:'image'or'color',width:canvas寬, height:canvas高, drawPercentCallback:回調(diào)函數(shù) //canvas this.conNode = node; this.background = null; this.backCtx = null; this.mask = null; this.maskCtx = null; this.lottery = null; this.lotteryType = 'image'; this.cover = cover || "#000"; this.coverType = coverType; this.pixlesData = null; this.width = width; this.height = height; this.lastPosition = null; this.drawPercentCallback = drawPercentCallback; this.vail = false; } Lottery.prototype = { createElement: function(tagName, attributes) { var ele = document.createElement(tagName); for (var key in attributes) { ele.setAttribute(key, attributes[key]); } return ele; }, 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); }, resizeCanvas: function(canvas, width, height) { canvas.width = width; canvas.height = height; canvas.getContext('2d').clearRect(0, 0, width, height); }, resizeCanvas_w: function(canvas, width, height) { canvas.width = width; canvas.height = height; canvas.getContext('2d').clearRect(0, 0, width, height); if (this.vail) this.drawLottery(); else this.drawMask(); }, drawPoint: function(x, y, fresh) { this.maskCtx.beginPath(); this.maskCtx.arc(x, y, 20, 0, Math.PI * 2); this.maskCtx.fill(); this.maskCtx.beginPath(); this.maskCtx.lineWidth = 60; this.maskCtx.lineCap = this.maskCtx.lineJoin = 'round'; if (this.lastPosition) { this.maskCtx.moveTo(this.lastPosition[0], this.lastPosition[1]); } this.maskCtx.lineTo(x, y); this.maskCtx.stroke(); this.lastPosition = [x, y]; this.mask.style.zIndex = (this.mask.style.zIndex == 20) ? 21 : 20; }, 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; _this.conNode.addEventListener('mouseup', function(e) { e.preventDefault(); isMouseDown = false; var per = _this.getTransparentPercent(_this.maskCtx, _this.width, _this.height); if (per >= 80) {//在大于等于80%的時候調(diào)用回調(diào)函數(shù) if (typeof(_this.drawPercentCallback) == 'function') _this.drawPercentCallback(); } }, false); } else { _this.conNode.addEventListener("touchmove", function(e) { if (isMouseDown) { e.preventDefault(); } if (e.cancelable) { e.preventDefault(); } else { window.event.returnValue = false; } }, false); _this.conNode.addEventListener('touchend', function(e) { isMouseDown = false; var per = _this.getTransparentPercent(_this.maskCtx, _this.width, _this.height); if (per >= 80) {//在大于等于80%的時候調(diào)用回調(diào)函數(shù) if (typeof(_this.drawPercentCallback) == 'function') _this.drawPercentCallback(); } }, false); } this.mask.addEventListener(clickEvtName, function(e) { e.preventDefault(); isMouseDown = true; var x = (device ? e.touches[0].pageX : e.pageX || e.x); var y = (device ? e.touches[0].pageY : e.pageY || e.y); _this.drawPoint(x, y, isMouseDown); }, false); this.mask.addEventListener(moveEvtName, function(e) { e.preventDefault(); if (!isMouseDown) return false; e.preventDefault(); var x = (device ? e.touches[0].pageX : e.pageX || e.x); var y = (device ? e.touches[0].pageY : e.pageY || e.y); _this.drawPoint(x, y, isMouseDown); }, false); }, drawLottery: function() { 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, _this.width, _this.height); _this.drawMask(); } 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(); this.drawMask(); } }, drawMask: function() { 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.resizeCanvas(_this.mask, _this.width, _this.height); var android = (/android/i.test(navigator.userAgent.toLowerCase())); _this.maskCtx.globalAlpha = 1;//上面一層的透明度,1為不透明 _this.maskCtx.drawImage(this, 0, 0, this.width, this.height, 0, 0, _this.width, _this.height); //---以下一段為在上面一層上寫字 // var fontSize = 50; // var txt = '123123'; // var gradient = _this.maskCtx.createLinearGradient(0, 0, _this.width, 0); // gradient.addColorStop("0", "#fff"); // gradient.addColorStop("1.0", "#000"); // _this.maskCtx.font = 'Bold ' + fontSize + 'px Arial'; // _this.maskCtx.textAlign = 'left'; // _this.maskCtx.fillStyle = gradient; // _this.maskCtx.fillText(txt, _this.width / 2 - _this.maskCtx.measureText(txt).width / 2, 100); // _this.maskCtx.globalAlpha = 1; _this.maskCtx.globalCompositeOperation = 'destination-out'; } image.src = this.cover; } }, init: function(lottery, lotteryType) { if (lottery) { this.lottery = lottery; this.lottery.width = this.width; this.lottery.height = this.height; this.lotteryType = lotteryType || 'image'; this.vail = true; } if (this.vail) { this.background = this.background || this.createElement('canvas', { style: 'position:fixed;top:0;left:0;background-color:transparent;' }); } this.mask = this.mask || this.createElement('canvas', { style: 'position:fixed;top:0;left:0;background-color:transparent;' }); this.mask.style.zIndex = 20; if (!this.conNode.innerHTML.replace(/[\w\W]| /g, '')) { if (this.vail) this.conNode.appendChild(this.background); this.conNode.appendChild(this.mask); this.bindEvent(); } if (this.vail) this.backCtx = this.backCtx || this.background.getContext('2d'); this.maskCtx = this.maskCtx || this.mask.getContext('2d'); if (this.vail) this.drawLottery(); else this.drawMask(); var _this = this; window.addEventListener('resize', function() { _this.width = document.documentElement.clientWidth; _this.height = document.documentElement.clientHeight; _this.resizeCanvas_w(_this.mask, _this.width, _this.height); }, false); } }
上述內(nèi)容就是怎么在JavaScript中使用canvas實現(xiàn)一個橡皮擦效果,你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
網(wǎng)站標題:怎么在JavaScript中使用canvas實現(xiàn)一個橡皮擦效果-創(chuàng)新互聯(lián)
網(wǎng)址分享:http://muchs.cn/article16/dgepgg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供手機網(wǎng)站建設(shè)、建站公司、服務(wù)器托管、App設(shè)計、網(wǎng)站收錄、軟件開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容