WEB前端第六十八课——H5新特性：Canvas案例（刮刮乐、小球动画，图片无缝滚动）
1.刮刮乐
案例目标：利用canvas绑定事件，模拟简单刮刮乐程序。
案例思路：在canvas画布上引入是否中奖背景图片，然后在图片上覆盖涂层，当鼠标点击
并移动时擦出路径上的涂层，显示中奖信息。
主要事件：onload，onmousedown，onmousemove，onmouseup
代码示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas7刮刮乐</title>
</head>
<body>
<canvas id="canvas7" width="520" height="780">
"您的浏览器不支持Canvas！"
</canvas>
<script>
var canvas=document.getElementById('canvas7');
var ctx=canvas.getContext('2d');
var imageArr=['../Images/rotation01.jpg','../Images/rotation02.jpg','../Images/rotation03.jpg'];
var imgObj={};
var flag=0;
for (var i=0;i<imageArr.length;i++){
var img=new Image();
img.src=imageArr[i];
imgObj[i]=img;
img.onload=function () {
flag++ //确保待图片全部加载完成后调用“lottery()”方法。
if (flag==imageArr.length){
lottery(imgObj); //全部图片加载完成后调用函数。
}
}
}
// 单独封装随机背景和清除覆盖填充函数
function lottery(obj) {
var num=Math.ceil(Math.random()*10); //创建随机数，通过设置随机数值控制中奖概率
if (num == 1){
canvas.style.background='URL('+obj[0].src+')';
}else if (num ==2){
canvas.style.background='URL('+obj[1].src+')';
}else {
canvas.style.backgroundImage='URL('+obj[2].src+')';
}
ctx.fillStyle='lightgray';
ctx.fillRect(0,0,canvas.width,canvas.height);
// 创建鼠标点击事件，鼠标移动清除画像填充
canvas.onmousedown=function () {
canvas.onmousemove=function (e) {
e = e||window.event;
ctx.clearRect(e.offsetX,e.offsetY,25,25); //利用offset对象定位鼠标轨迹，设定清除范围
}
}
// 创建鼠标抬起事件，停止鼠标移动事件
canvas.onmouseup=window.document.onmouseup=function () {
canvas.onmousemove=null;
}
}
</script>
</body>
</html>
2.小球动画
⑴ 一个小球动画
代码示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas8小球动画</title>
<style>
canvas{
border: 1px solid #1e7e34;
}
</style>
</head>
<body>
<canvas height="300" width="600" id="canvasBall" ></canvas>
<script>
var canvas=document.getElementById('canvasBall');
var ctx=canvas.getContext('2d');
//定义小球半径
var r=Math.floor(Math.random()*50)+10;
//定义小球圆心坐标
var x=Math.floor(Math.random()*(600-r*2)+r);
var y=Math.floor(Math.random()*(300-r*2)+r);
//定义小球随机填充颜色
var color='rgb('+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+')';
//定义小球移动速度
var dx=3;
var dy=6;
//实现小球运动效果
var timer=setInterval(function () {
ctx.clearRect(0,0,canvas.width,canvas.height);
x+=dx;
y+=dy;
if (x>=600-r){
dx=-dx;
}else if (x<=r){
dx=Math.abs(dx);
}
if (y>=300-r){
dy=-dy;
}else if (y<=r){
dy=Math.abs(dy);
}
ctx.beginPath();
ctx.arc(x, y, r, 0,Math.PI*2,false);
ctx.fillStyle=color;
ctx.fill();
ctx.closePath();
},50)
</script>
</body>
</html>
⑵ 随机多个小球
代码示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas8小球动画</title>
<style>
canvas{
border: 1px solid #1e7e34;
}
</style>
</head>
<body>
<canvas height="300" width="600" id="canvasBall" ></canvas>
<script>
var canvas=document.getElementById('canvasBall');
var ctx=canvas.getContext('2d');
//创建生成小球的构造函数。
function Ball() {
//定义随机半径
this.r=Math.ceil((Math.random()*20)+10);
//定义随机生成圆心坐标
this.x=Math.ceil(Math.random()*(600-this.r));
this.y=Math.ceil(Math.random()*(300-this.r));
//定义小球随机运动速度
this.dx=Math.ceil(Math.random()*3);
this.dy=Math.ceil(Math.random()*6);
//定义小球随机颜色填充（颜色填充值为字符串格式）
this.color1='rgb('+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+')';
/* //设置小球随机径向渐变填充
var radialGradient=ctx.createRadialGradient(this.x, this.y,this.r/4,this.x, this.y, this.r/2);
radialGradient.addColorStop(0,'white');
radialGradient.addColorStop(0.5,'yellow');
radialGradient.addColorStop(1,'red');
this.color2=radialGradient;*/
}
//创建小球运动函数，通过原型定义
Ball.prototype.move=function () {
//定义水平方向
this.x+=this.dx;
if (this.x>=(600-this.r)){
this.dx = -this.dx;
}else if (this.x<=this.r){
this.dx = Math.abs(this.dx);
}
//定义垂直方向
this.y+=this.dy;
if (this.y>=(300-this.r)){
this.dy = -this.dy;
}else if (this.y<=this.r){
this.dy = Math.abs(this.dy);
}
}
//绘制圆形小球，函数原型上定义
Ball.prototype.draw=function () {
ctx.beginPath();
ctx.fillStyle=this.color1; //不支持径向渐变效果？？
ctx.arc(this.x, this.y, this.r, 0,Math.PI*2,false);
ctx.fill();
ctx.closePath();
}
//执行小球绘制，调用构造函数Ball()
var arr=[];
for (var i=0;i<25;i++){
arr[i]=new Ball();
console.log(arr[i].color1);
// console.log(arr[i].color2);
}
console.log(arr);
//通过setInterval方法实现小球运动效果
var timer=setInterval(function () {
//清除画布
ctx.clearRect(0,0,canvas.width,canvas.height);
//调用小球绘制和位置变动函数
for (var i=0;i<arr.length;i++){
arr[i].move();
arr[i].draw();
}
},50)
</script>
</body>
</html>
⑶ prototype
每一个函数都有一个默认的属性——prototype，prototype的属性值也是一个对象，
是属性的集合，而prototype对象的默认属性只有一个——constructor，指向函数本身，
但是可以通过prototype自定义添加函数的属性。
语法示例：Fn.prototype.peo='str' || fn(){} ;
3.图片无缝滚动
该实例主要利用图像切片方法，通过图像坐标变化实现滚动效果。
代码示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas9图片无缝滚动</title>
</head>
<body>
<canvas id="canvasImg" width="520" height="780">
您的浏览器不支持Canvas标签！
</canvas>
<script>
var canvas=document.getElementById('canvasImg');
var ctx=canvas.getContext('2d');
var imgObj={
'rot1':'../Images/rotation01.jpg',
'rot2':'../Images/rotation02.jpg',
'rot3':'../Images/rotation03.jpg',
}
var imgLoadObj={};
var flag=0;
for (var i in imgObj){
var img=new Image(); //生成图片对象实例
img.src=imgObj[i];
imgLoadObj[i]=img; //创建图片对象集合
img.onload=function () {
flag++;
if (flag==Object.keys(imgObj).length){
rotate(imgLoadObj); //图片全部加载完成后，调用图片滚动方法
// console.log(imgLoadObj);
}
}
}
function rotate(imgLoadObj) {
var x=0;
var timer=setInterval(function () {
ctx.clearRect(0,0,canvas.width,canvas.height);
x--;
if (x<-1560){
x = 0;
}
ctx.drawImage(imgLoadObj['rot3'],0,0);
ctx.drawImage(imgLoadObj['rot2'],0,0);
ctx.drawImage(imgLoadObj['rot1'],x,0);
if (x<0){
ctx.drawImage(imgLoadObj['rot2'],0,0,-x,780,520+x,0,-x,780);
}
if (x<-520){
ctx.drawImage(imgLoadObj['rot3'],0,0,-x-520,780,1040+x,0,-x-520,780);
}
if (x<-1040){
ctx.drawImage(imgLoadObj['rot1'],0,0,-x-1040,780,1560+x,0,-x-1040,780);
}
},10)
}
</script>
</body>
</html>
