H5刮刮卡效果

最新推荐文章于 2022-08-25 17:00:02 发布

终身成长型

最新推荐文章于 2022-08-25 17:00:02 发布

阅读量625

点赞数

分类专栏：前端开发文章标签： html5 canvas

本文链接：https://blog.csdn.net/weixin_45675581/article/details/101753638

版权

效果图：
在这里插入图片描述

核心就是使用ctx.globalCompositeOperation = ‘destination-out’;

全部代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	.ggk{
		width:200px;
		height: 100px;
		border:1px solid #ccc;
		margin:0 auto;
		color:red;
		position: relative;
	}
	.ggk span{
		position: absolute;
		width:100%;
		height: 100%;
		text-align: center;
		font-size:50px;
		line-height: 100px;
	}
	canvas{
		position: absolute;
		left:0;
		top:0;
	}
	</style>
</head>
<body>

<div class='ggk'>
	<span id='span'>200元</span>
	<canvas id='canvas'></canvas>
</div>

<script type="text/javascript">
var canvas = document.getElementById("canvas");
init(