我们运用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后借助测试用户鼠标移到和手势来描绘一个透明的图形,这样才能看见Canvas背景下的真实照片html5 canvas 刮刮乐,就达到刮刮卡效果。
分类:手机特效> canvas难易:中级
程序员,你不是一个人;网站开发QQ群:642228541,充值,或联系QQ321037704直接充值
查看演示下载资源:265次
手机扫码访问:
下载资源下载积分:20积分
首先禁止鼠标拖动,目的是让鼠标能在照片上实现刮彩票的效果。
var bodyStyle = document.body.style;
bodyStyle.mozUserSelect = 'none';
bodyStyle.webkitUserSelect = 'none';
然后实例化图片类,获取canvas画布,并修改背景为透明和定义position为absolute。下面用到2张随机图片作为演示模型,你也可以在imgs 里面加多个截图。
var img = new Image();
var canvas = document.querySelector('canvas');
canvas.style.backgroundColor='transparent';
canvas.style.position = 'absolute';
var imgs = ['p_0.jpg','p_1.jpg'];
var num = Math.floor(Math.random()*2);
img.src = imgs[num];
当到照片加载完的之后,需定义截图的相关属性和变量,函数layer()用来绘制一个灰色的正方形,eventDown()定义了按下事件eventUp()定义了松开事件html5 canvas 刮刮乐,eventMove()定义了移动事件,其中当按下时,获取坐标位移,并借助arc(x, y, 10, 0, Math.PI * 2)来绘制小圆点。
img.addEventListener('load', function(e) {
var ctx;
var w = img.width,
h = img.height;
var offsetX = canvas.offsetLeft,
offsetY = canvas.offsetTop;
var mousedown = false;
function layer(ctx) {
ctx.fillStyle = 'gray';
ctx.fillRect(0, 0, w, h);
}
function eventDown(e){
e.preventDefault();
mousedown=true;
}
function eventUp(e){
e.preventDefault();
mousedown=false;
}
function eventMove(e){
e.preventDefault();
if(mousedown) {
if(e.changedTouches){
e=e.changedTouches[e.changedTouches.length-1];
}
var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,
y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
with(ctx) {
beginPath()
arc(x, y, 10, 0, Math.PI * 2);//绘制圆点
fill();
}
}
}
//...
});
最后,通过canvas调用以上方程,绘制图形,并且侦听触控及鼠标事件,调用相应的变量,我们看下代码:
本文来自电脑杂谈,转载请注明本文网址:
http://www.pc-fly.com/a/ruanjian/article-121570-1.html