啥也不说,先看效果图。
刮奖是一个很有意思的东西,充满了神秘,因为谁也不知道挂出来的是什么,总是期待有惊喜。
网上的刮奖大多用的“虚假刮奖”,就是上面一个 canvas 层,下面一个图片层。把canvas “挖空”,露出了下面的图片。
虽然,也可以实现刮奖效果,但是总觉得太low。要用一个canvas 就搞定,才完美。
今天,我就来写一个 canvas 随机刮妹子 的案例。
第一步:HTML
<div class="box">
<canvas class="mycan" id="mycan" width="300" height="200"></canvas>
</div>
canvas 是必须的。设定好大小,同时要准备好几张妹子图。
不出意外的话,妹子图跟 canvas 大小是一样的。
不要增加自己的编码工作量。
第二步:CSS
.box{
width: 300px;
height: 200px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
.box .mycan{
display: block;
}
这个 CSS 就是做基础的框架设置。
第三步:JavaScript
主要思路:
1、获取 canvas ,并得到 content。
2、设置奖品图片数组
3、【关键】生成一个图片对象,new Image(),方便设置画笔笔触内容
canvas 的画笔笔触内容除了是色彩外,还可以是图片内容。这里用到的关键就是:
// 设置笔触内容为图片,这样画出来的就是图片内容,而不是单纯的色彩线条
ctx.strokeStyle = ctx.createPattern(img, 'no-repeat');
w3school 上对 createPattern 的解释是:
createPattern() 方法在指定的方向内重复指定的元素。元素可以是图片、视频,或者其他 <canvas> 元素。被重复的元素可用于绘制/填充矩形、圆形或线条等等。
言外之意,通过 createPattern 方法,在 canvas 中可以用图片来做填充部分,也可以用来做画笔笔触部分。
4、刮奖的过程,其实就是获取鼠标坐标,沿着坐标绘制图片的过程。所以,接下来的代码就是获取鼠标坐标,再画线的思路。
完整代码如下:
// 获取canvas ID,相当于画布
let mycan = document.getElementById("mycan");
// 获取canvas 的上下文,相当于 画笔。
let ctx = mycan.getContext("2d");
// 奖品图片
let images = [
"images/1.jpg",
"images/2.jpg",
"images/3.jpg"
];
// 生成图像对象,作为画笔填充内容。
let img = new Image();
img.src = images[ Math.floor( Math.random()*3 ) ];
// 初始化画布,已经画布上的提示文字
let intCanvas = function(){
ctx.fillStyle = "#999"; // 填充背景色
ctx.fillRect(0,0,mycan.width,mycan.height); // 设置填充范围,跟 canvas 大小一样
// 设置刮奖文字:颜色,字体大小,水平居中,文字内容和位置。
ctx.fillStyle = "#000"; // 重新设置填充颜色为黑色
ctx.font="40px 'Microsoft Yahei'";
ctx.textAlign = "center";
ctx.fillText("刮开有惊喜", mycan.width/2,mycan.height/2+10);
};
// 定义鼠标在canvas上移动的函数
let mMove = function( event ){
let e = event || window.event;
ctx.lineTo(e.offsetX,e.offsetY); // 画线条到 鼠标位置
ctx.stroke();
};
// 鼠标按下函数
let mDown = function(event){
let e = event || window.event;
// 开始canvas路径
ctx.beginPath();
// 画笔起笔的地方
ctx.moveTo(e.offsetX,e.offsetY); // 画线条到 鼠标位置
// 移动鼠标就作画
mycan.addEventListener("mousemove",mMove);
};
// 鼠标松开函数
let mUp = function(){
// 封闭canvas路径
ctx.closePath();
// 移除mousemove事件
mycan.removeEventListener("mousemove",mMove);
};
// 功能主体部分
intCanvas();
// 因为要保证图片加载完毕,才能执行代码。所以,使用 img.onload 事件。
img.onload = function() {
// 设置笔触内容为图片,这样画出来的就是图片内容,而不是单纯的色彩线条
ctx.strokeStyle = ctx.createPattern(img, 'no-repeat');
// 设置画笔的粗细
ctx.lineWidth = 50;
// 设置线条头尾为圆形。
ctx.lineCap = "round";
// 设置线条拐点处为圆形
ctx.lineJoin = 'round';
// 鼠标按下,准备开始画画
mycan.addEventListener("mousedown", mDown);
// 鼠标抬起,停止做画。
mycan.addEventListener("mouseup", mUp);
};
感觉自己好久没更新博客了,最近太忙,哎~~想我的暑假,快来啊~~啊啊啊啊啊~~~~