全国服务热线:4008-888-888

技术知识

微信小程序开发_js canvas完成橡皮擦效果

js canvas实现橡皮擦效果       这篇文章主要为大家详细介绍了使用Canvas实现橡皮擦效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了canvas实现橡皮擦效果的具体代码,供大家参考,具体内容如下

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" / 
 div id="J_cover" /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 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);
}

另一个zepto.js是库函数文件,可网上自行查找

出来的效果如图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服