这篇博客通过HTML和JavaScript展示了如何利用canvas元素创建一个动态刮刮卡效果。首先设置canvas的背景颜色和大小，然后加载图片并绘制到canvas上。接着定义线条样式，并在触摸开始时清除指定区域，实现刮擦效果。最后，添加触摸移动事件监听器，实现在移动设备上的刮擦交互。
<style type="text/css">
.bj{width: 100%;height: 100%;background-color: red;position: relative;z-index: 1;}
#canvas{position: absolute;z-index: 2;}
</style>
<div class="bj">
<canvas id="myCanvas" width="200" height="200" >
</canvas>
</div>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
//var zhezhao = document.getElementById("zhezhao");
var pmk = $(document).width();
var pmg = $(document).height();
$('#myCanvas').attr("width",pmk);
$(
.bj{width: 100%;height: 100%;background-color: red;position: relative;z-index: 1;}
#canvas{position: absolute;z-index: 2;}
</style>
<div class="bj">
<canvas id="myCanvas" width="200" height="200" >
</canvas>
</div>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
//var zhezhao = document.getElementById("zhezhao");
var pmk = $(document).width();
var pmg = $(document).height();
$('#myCanvas').attr("width",pmk);
$(
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
