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 ElementById('canvas7');
var Context('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;
flag++ //确保待图⽚全部加载完成后调⽤“lottery()”⽅法。
if (flag==imageArr.length){
lottery(imgObj); //全部图⽚加载完成后调⽤函数。
}
}
}
// 单独封装随机背景和清除覆盖填充函数
function lottery(obj) {
canvas动画var il(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);
// 创建⿏标点击事件，⿏标移动清除画像填充
e = e||window.event;
ctx.clearRect(e.offsetX,e.offsetY,25,25); //利⽤offset对象定位⿏标轨迹，设定清除范围
}
}
// 创建⿏标抬起事件，停⽌⿏标移动事件
}
}
</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 ElementById('canvasBall');
var Context('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('+il(Math.random()*255)+','+il(Math.random()*255)+','+il(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 ElementById('canvasBall');
var Context('2d');
//创建⽣成⼩球的构造函数。
function Ball() {
/
/定义随机半径
this.il((Math.random()*20)+10);
//定义随机⽣成圆⼼坐标
this.il(Math.random()*(600-this.r));
this.il(Math.random()*(300-this.r));
//定义⼩球随机运动速度
this.il(Math.random()*3);
this.il(Math.random()*6);
//定义⼩球随机颜⾊填充（颜⾊填充值为字符串格式）
var ateRadialGradient(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');
}
//创建⼩球运动函数，通过原型定义
ve=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.lor1; //不⽀持径向渐变效果？？
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 ElementById('canvasImg');
var Context('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; //创建图⽚对象集合
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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论