canvas应用之刮刮乐实现

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

原创

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

2 ·

CC 4.0 BY-SA版权

本文详细介绍了如何利用HTML5的canvas元素来创建一款互动式的刮刮乐效果。通过绘制图形、设置遮罩层以及实现用户交互功能，让读者能够掌握canvas的基本用法，并能应用于实际的网页交互设计中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
	<title>刮刮乐</title>
</head>
<body>
	<canvas id="can" width="500" height="500"></canvas>
	<script type="text/javascript">
		var can = document.getElementById("can");
		var ctx = can.getContext("2d");
		var wid = can.width;
		var hei = can.height;

		//当鼠标移动过快时，因为刷新率捕获事件的问题导致划过的区域并不连贯，但无法从技术层面解决，那就从视觉上入手
		var lastPoin = {} ;//上一个位置
		var nowPoin = {} ;//下一个位置

		init();
		
		function init(){
			// ctx.globalAlpha = '0.8';
			ctx.fillStyle = "#ccc";
			ctx.fillRect(0,0,wid,hei);
			ctx.globalCompositeOperation = "destination-out";//新旧像素合并


			//此处选用背景图片，因为绘制图片的话，在绘制刮刮层，图片就会被覆盖，背景图片则不会这样
			//并且图片加载是异步的，所以要等图片加载完成在设置为背景图片
			var img = new Image();
			img.src = './aa.png'; 
			img.onload = function(){
				can.style.background = "url("+ img.src +")";//背景图片

				can.addEventListener("mousedown",downFun,false);
			}
		}
		function downFun(e){
			lastPoin.x = e.clientX - can.offsetLeft;
			las