用原生js实现刮奖效果

最新推荐文章于 2024-08-18 20:11:48 发布

lzz_1234

最新推荐文章于 2024-08-18 20:11:48 发布

阅读量2.1k

点赞数 6

分类专栏：前端

本文链接：https://blog.csdn.net/lzz_1234/article/details/89311246

版权

本文介绍了如何利用原生JavaScript和canvas元素创建简单的刮奖效果。通过在canvas上覆盖灰色并设置globalCompositeOperation属性为destination-out，实现刮开后的透明效果。同时，结合鼠标事件监听，实现鼠标移动时刮奖区域跟随的效果。最终完成一个趣味的刮奖互动功能。

摘要由CSDN通过智能技术生成

用原生js实现简单的刮奖效果
效果图
在这里插入图片描述

分析：这是运用canvas来做的，页面结构为一个canvas和一张图片。canvas在最上层，图片在最下层。canvas与图片宽高一致。首先在canvas上填充灰色并写上文字，将“画笔”的globalCompositeOperation属性设置为destination-out，（globalCompositeOperation属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上,destination-out属性值在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。）
最后设置鼠标事件，当鼠标按下时开始“画画”，当鼠标移动时，“画笔”跟随鼠标移动，当鼠标弹起时，“画笔”停止“作画”。也要考虑到鼠标离开canvas时，也要停止“作画”。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>刮奖</title>
    <link rel="stylesheet" href="css/index.css">

</head>
<body>
<div class="big">
    <canvas id="mycan" class="myca