java 橡皮擦_js canvas实现橡皮擦效果
本文实例为大家分享了canvas实现橡皮擦效果的具体代码,供大家参考,具体内容如下
html部分
My Canvas 0.1
html,body,div,img{
margin:0;
padding:0;
}
a,a:hover{
text-decoration:none;
}
.background{
width:100%;
position:fixed;
top:0;
left:0;
}
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();
});
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);
}
}
另一个zepto.js是库函数文件,可网上自行查找
出来的效果如图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
java 橡皮擦_js canvas实现橡皮擦效果相关推荐
- canvas实现涂鸦效果--橡皮檫和历史记录
利用canvas实现涂鸦效果,包括更换笔触大小颜色.换背景图.橡皮檫.历史记录.清屏等功能,并能保存涂鸦图片到本地. 由于篇幅问题,本文主要实现橡皮檫和历史记录功能,该部分功能不操作背景图片,最终效果 ...
- Java中实现六种图像处理的效果(灰度化、马赛克效果、去背景实现、珠纹化实现、黑白版画效果、油画效果)
** Java中实现六种图像处理的效果(灰度化.马赛克效果.去背景实现.珠纹化实现.黑白版画效果.油画效果) ** 本文的编程的思想: 先将实现这六种效果的方法写入一个名为pic_performanc ...
- Java中实现图像的卷积效果
** Java中实现图像的卷积效果 ** 图像的卷积: 指的是使用一个卷积核(kernel)对图像中的每一个像素进行一些列操作.卷积核(算子)是用来做图像处理时的矩阵,图像处理时也称为掩膜,是于原图像 ...
- java.lang.RuntimeException: Canvas: trying to draw too large(203212800bytes) bitmap.
java.lang.RuntimeException: Canvas: trying to draw too large(203212800bytes) bitmap. 异常原因分析:Canvas绘制 ...
- java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来 定义Image对象的src属性,参数:图片路径 定义Image对象 ...
- html中放大镜案列,Canvas实现放大镜效果完整案例分析(附代码)
本文主要记录 canvas 在图像.文字处理.离屏技术和放大镜特效的实现过程中使用到的api.先看下效果吧: 一张模糊的图片: 鼠标点击任意位置,产生放大效果: 哇塞~ 一个帅哥,哈哈哈哈~ 1.放大 ...
- 原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单 2, 只需引入 ...
- Java垂直镜像,Java OpenCV实现图像镜像翻转效果
本文实例为大家分享了Java OpenCV实现图像镜像翻转效果的具体代码,供大家参考,具体内容如下 主要使用OpenCV的flip()方法,可以实现图像的垂直.水平以及同时垂直镜像翻转. flip是C ...
- 鼠标点击特效:canvas点击效果
JS代码(代码中包含了sketch.min.js的源码,如果你的网站已经引用了,请删掉下面的6到7行.): /** 鼠标点击特效:canvas点击效果*/ /* Copyright (C) 2013 ...
最新文章
- 2.3.2便捷的电子邮件
- PHP:6种GET和POST请求发送方法
- 盘点几种数据库的分页SQL的写法(转)
- mysql 指令没有用_Mysql指令
- Java教程:Java字符串的替换(replace()、replaceFirst()和replaceAll())
- 如何快速开发后台管理系统【未完,待补充,欢迎拍砖】
- Nuget:Newtonsoft.Json
- 医用口罩、N95、KN95口罩的区别
- 【剑指offer】八皇后问题
- 阿里矢量图标库项目添加合作者
- ApacheCN 翻译/校对/笔记整理活动进度公告 2019.9.13
- Veeam 完整备份文件 (VBK) 和增量备份文件 (VIB)
- 笔记本连接显示器后没有声音_外接显示器后没声音怎么回事
- oracle em 监听,监听程序ORACLE_HOME是啥??我EM重置,这个不知道要填什么
- duilib 关于wke 控件焦点问题
- Android开发 ConstraintLayout布局的详解
- 男子与 AI 对话 6 周后,选择自杀!一时难分“魔鬼”还是“救星”?
- 北京大兴区强关私立幼儿园 致数千儿童无学可上
- MPQ6533驱动程序
- LeetCode 每日一题 2021/9/27-2021/10/3
热门文章
- springboot之监听器
- 【javaScript】Object.prototype.toString.call() 、 instanceof 以及 Array.isArray() 区别与优化层面的比较
- 基于SSM的美容院管理系统(附源码+项目展示)
- NIO 实现大文件切割
- ACM MM最佳论文全文:通过多对抗训练,从图像生成诗歌
- 一个北京妞写给天下所有女人的信
- ThreadPool.QueueUserWorkItem启动慢
- java单选按钮_Java Swing JRadioButton:单选按钮组件
- 企业级 Web 网站安全解决方案揭秘
- 计算机行业求职总结--准备篇