溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了怎么在JavaScript中使用canvas實現一個橡皮擦效果，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
1.可以使網頁具有交互性，例如響應用戶點擊，給用戶提供更好的體驗。 2.可以處理表單，檢驗用戶的輸入，并提供及時反饋節省用戶時間。 3.可以根據用戶的操作，動態的創建頁面。 4使用JavaScript可以通過設置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：回調函數
//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%的時候調用回調函數
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%的時候調用回調函數
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);
}
}上述內容就是怎么在JavaScript中使用canvas實現一個橡皮擦效果，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
