多个刮刮乐html,HTML5canvas实现高斯模糊、刮刮乐
1.高斯模糊(Gaussian blur)
原理:将图片插入到canvas中,将canvas中的图片,getImageData得到图片的像素值,用高斯模糊函数进像素值进行处理后,再把值putImageData放到canvas中,就实现了图片的高斯模糊处理。
高斯模糊函数中的逻辑:
注意:此处是window整个页面进行加载,不可以用img来调用onload方法,会报错:高斯函数未被定义的错误。
注意:getImageData、putImageData两个方法在服务器中使用有效。
HTML代码:
gauss
#data{
width: 400px;
height: 300px;
}
var oImg = document.getElementById('data');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var oData,newSrc;
window.onload = function () {
ctx.drawImage(oImg,0,0,400,300);
oData = ctx.getImageData(0,0,400,300);
newSrc = gaussBlur(oData);
ctx.putImageData(newSrc, 0, 0);
}
高斯模糊函数:
function gaussBlur(imgData) {
var pixes = imgData.data;
var width = imgData.width;
var height = imgData.height;
var gaussMatrix = [],
gaussSum = 0,
x, y,
r, g, b, a,
i, j, k, len;
var radius = 10;
var sigma = 5;
a = 1 / (Math.sqrt(2 * Math.PI) * sigma);
b = -1 / (2 * sigma * sigma);
//生成高斯矩阵
for (i = 0, x = -radius; x <= radius; x++, i++){
g = a * Math.exp(b * x * x);
gaussMatrix[i] = g;
gaussSum += g;
}
//归一化, 保证高斯矩阵的值在[0,1]之间
for (i = 0, len = gaussMatrix.length; i < len; i++) {
gaussMatrix[i] /= gaussSum;
}
//x 方向一维高斯运算
for (y = 0; y < height; y++) {
for (x = 0; x < width; x++) {
r = g = b = a = 0;
gaussSum = 0;
for(j = -radius; j <= radius; j++){
k = x + j;
if(k >= 0 && k < width){//确保 k 没超出 x 的范围
//r,g,b,a 四个一组
i = (y * width + k) * 4;
r += pixes[i] * gaussMatrix[j + radius];
g += pixes[i + 1] * gaussMatrix[j + radius];
b += pixes[i + 2] * gaussMatrix[j + radius];
// a += pixes[i + 3] * gaussMatrix[j];
gaussSum += gaussMatrix[j + radius];
}
}
i = (y * width + x) * 4;
// 除以 gaussSum 是为了消除处于边缘的像素, 高斯运算不足的问题
// console.log(gaussSum)
pixes[i] = r / gaussSum;
pixes[i + 1] = g / gaussSum;
pixes[i + 2] = b / gaussSum;
// pixes[i + 3] = a ;
}
}
//y 方向一维高斯运算
for (x = 0; x < width; x++) {
for (y = 0; y < height; y++) {
r = g = b = a = 0;
gaussSum = 0;
for(j = -radius; j <= radius; j++){
k = y + j;
if(k >= 0 && k < height){//确保 k 没超出 y 的范围
i = (k * width + x) * 4;
r += pixes[i] * gaussMatrix[j + radius];
g += pixes[i + 1] * gaussMatrix[j + radius];
b += pixes[i + 2] * gaussMatrix[j + radius];
// a += pixes[i + 3] * gaussMatrix[j];
gaussSum += gaussMatrix[j + radius];
}
}
i = (y * width + x) * 4;
pixes[i] = r / gaussSum;
pixes[i + 1] = g / gaussSum;
pixes[i + 2] = b / gaussSum;
}
}
//end
return imgData;
}
2. 刮刮乐
原理:将canvas背景用图片设置,canvas内容用刮刮乐灰色效果,然后鼠标按下、鼠标移动、鼠标抬起,完成清除canvas内容的操作
Document
var oCanvas = document.getElementById('canv'),
ctx = oCanvas.getContext('2d'),
w = oCanvas.width,
h = oCanvas.height,
lastPiont = {},
nowPoint = {};
function init(){
ctx.fillStyle = '#ccc';
ctx.fillRect(0, 0,w, h);
ctx.globalCompositeOperation = 'destination-out';
var img = new Image();
img.src = './1.jpeg';
img.onload = function(){
oCanvas.style.backgroundImage = 'url(' + img.src + ')';
oCanvas.addEventListener('mousedown', downFunc, false);
}
}
init();
function downFunc(e){
lastPiont.x = e.clientX - oCanvas.offsetLeft;
lastPiont.y = e.clientY - oCanvas.offsetTop;
oCanvas.addEventListener('mousemove', moveFunc, false);
document.addEventListener('mouseup', upFunc, false);
}
function moveFunc(e){
nowPoint.x = e.clientX - oCanvas.offsetLeft;
nowPoint.y = e.clientY - oCanvas.offsetTop;
ctx.beginPath();
ctx.fillStyle = 'red';
ctx.lineWidth = 40;
ctx.lineCap = 'round';
ctx.moveTo(lastPiont.x, lastPiont.y);
ctx.lineTo(nowPoint.x, nowPoint.y);
ctx.stroke();
ctx.arc(nowPoint.x, nowPoint.y, 20, 0, Math.PI *2);
ctx.closePath();
ctx.fill();
lastPiont.x = nowPoint.x;
lastPiont.y = nowPoint.y;
}
function upFunc(){
oCanvas.removeEventListener('mousemove', moveFunc, false);
document.removeEventListener('mouseup', upFunc, false);
clearCanvas();
}
function clearCanvas(){
var d = ctx.getImageData(0, 0, w, h),
c = 0,
len = d.data.length;
for(var i = 0; i < len; i += 4){
if(d.data[i] === 0){
c++;
}
}
if(c > len/4 *0.7){
ctx.clearRect(0, 0, w, h);
}
}
多个刮刮乐html,HTML5canvas实现高斯模糊、刮刮乐相关推荐
- 刮刮乐html5效果擦除,HTML5实现刮刮卡的效果
HTML5实现类似刮刮卡的功能 上面是最终实现刮刮卡效果 注意要点设置: 1.设置用户缩放:user-scalable=no|yes [java] view plaincopyprint? 2.禁止拖 ...
- steam同乐无法连接远程计算机,Steam远程同乐功能怎么用 Steam远程同乐功能使用教程...
Steam远程同乐功能怎么用?Steam现已开放远程同乐功能,玩家们可通过远程同乐功能与不同的玩家进行沙发合作游戏.还不知道怎么使用Steam远程同乐功能的朋友,下面小编为大家带来了Steam远程同乐 ...
- 乐视2 usb计算机连接,乐视手机怎么连接电脑?乐视手机正确连接电脑教程
乐视手机深受部分朋友喜爱.小编算是乐视手机体验者中较早的一批,下面就来介绍一下乐视手机连接电脑的方法. 乐视手机正确连接电脑教程 先在电脑上下载一个手机助手,安卓手机助手比较多,例如"豌豆荚 ...
- 乐视2支不支持html,乐2有NFC吗 乐视手机2支持NFC功能吗?
虽然绝大多数消费者在购机的时候不会考虑一款智能手机是否支持NFC功能,但是依旧有不少搞机者对乐2是否支持NFC产生了一定的兴趣.我们知道上一代乐1和乐1s均不支持这一功能,那么全新一代乐2会支持这一功 ...
- 乐视手机1S正式发售,乐视商城官网抽风遭网友吐槽
乐视手机1S正式发售,乐视商城官网抽风遭网友吐槽 10月27日,乐视召开的新品发布会上正式推出千元金属新机乐1s,售价1099元.今天11月3日上午10:00,乐1s在乐视商城.京东商城首发开卖,现货 ...
- html5 刮刮乐 源码,HTML5 canvas实现刮刮乐功能
最近比较闲,除了在群里给大家交流交流,就没啥学习重心.看了论坛里的各种帖子,各种问题满天飞,这里我就整理了2个h5 canvas的demo,分享给大家! 使用html5的canvas实现刮刮乐功能 舍 ...
- android刮刮乐游戏布局,Android studio实现刮刮乐的方法
本文实例为大家分享了android studio实现刮刮乐的具体代码,供大家参考,具体内容如下 mainactivity public class mainactivity extends appco ...
- HTML用画布实现刮刮卡,利用HTML5的画布Canvas实现刮刮卡效果_javascript技巧
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
- 力士乐伺服电机编码器调零_力士乐伺服电机故障与维修排除备份构成
先从内到外,进行力士乐伺服电机的分析,然后进行维修,进行排除. 1先从外观检查,看驱动器和电机是否有损坏:闻一下是否有烧过的异味:晃动一下驱动器或电机看是否有杂物的响动.有就拆开,直接就可以判断出故障 ...
最新文章
- yum 安装指定版本php,怎样通过yum安装指定版本的php
- 上手kubernetes之前,你应该知道这6件事
- JTAG之IO口作为普通IO口使用时注意事项
- 【STM32】FreeRTOS系统配置
- redis-cli 命令详解
- ABAP Access global variable in another program
- 制造业物料清单BOM、智能文档阅读、科学文献影响因子、Celebrated Italian mathematician ZepartzatT Gozinto 与 高津托图...
- Java I/O体系之Writer和Reader详细讲解
- DirectX9 ShadowMap例子学习笔记
- C语言 — 数据类型,基本整型所占字节数
- 富士康给员工分红 平均每人33万元
- pandas 筛选出满足条件的行并赋值
- 网络排查工具MTR介绍
- 用正则表达式清除各类符号
- C语言旅途之用for循环与break求最大素数(质数)
- 在登录页面中输入正确的信息还是显示用户名或密码错误
- SQL解决过去M天内连续N天符合某条件问题
- 易宝支付[钱麦](附代码)
- 仿bilibili微信小程序2
- 用Word2003打开.docx文档