从零开始的canvas 刮刮乐

最新推荐文章于 2025-06-20 23:46:32 发布

转载最新推荐文章于 2025-06-20 23:46:32 发布 · 431 阅读

canvas 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用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>