从零开始的canvas 刮刮乐

随机图片切换与鼠标跟踪擦除效果
本文介绍了一个使用HTML5 Canvas实现的有趣效果:页面加载时随机选择一张图片作为背景,当鼠标移动时,会在鼠标位置擦除背景,露出下面的默认颜色。此效果通过JavaScript控制,涉及图片加载、随机数生成、鼠标事件监听等技术。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#Mycanvas {
			border:1px solid #000;
			margin:0 auto;
		}
	</style>
</head>
<body>
<canvas id="myCanvas" style="border: 1px solid #000000;" ></canvas>

	<script>
		var c = document.getElementById("myCanvas");
        var context = c.getContext("2d");
		var img = new Image();
		img.src = "images/img0.jpg";  //完整图片地址
		var str = "images/img";  //图片地址前缀
		var nums = "0000000000112233445566778";  //控制图片出现的概率,此处 图片0出现的概率为2/5,图片1出现的概率为1/25,以此类推,可根据自己的需求修改出现概率及图片
		var num = nums.charAt(parseInt(Math.random()*25)); //随机数生成出现的图片数字   charAt返回制定位置字符 parseInt返回整数 Math.random 返回0-1的随机数
		var jpg = ".jpg"; //图片地址的后缀
		c.style.backgroundImage = 'url("'+str+num+jpg+'")'; //设置画布背景为随机生成的图片地址
		c.style.width = "320px";
		c.style.height = "160px";

		context.fillStyle = "#ccc";   //填充色
		context.globalCompositeOperation = "destination-over"; //与destination-out实现擦除效果
		context.beginPath();   //开始绘制
		context.fillRect(0,0,320,160);    //绘制一个矩形
		context.closePath();
		c.onmousemove = function(e)
		{
		//获取鼠标位置
		var x = e.pageX - c.offsetLeft;    //pageX鼠标位置 文档边缘
		var y = e.pageY - c.offsetTop;
		context.globalCompositeOperation = "destination-out";     //将一部份变为out 而不是全部 out部分进行显示
		context.beginPath();
		context.arc(x,y,15,0,2*Math.PI,true);  //绘制园.之前讲过了
		context.fill();						  //进行填充
		context.closePath();
		}
	</script>
</body>
</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值