canvas的实例--你中奖了吗？刮刮乐

最新推荐文章于 2024-01-24 15:24:21 发布

一个大土豆的日常

最新推荐文章于 2024-01-24 15:24:21 发布

阅读量538

点赞数 1

分类专栏： Canvas 文章标签： canvas 电商

本文链接：https://blog.csdn.net/wbdsr234/article/details/68941561

版权

Canvas 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

canvas–刮刮乐效果，常见于电商网站的刮奖环节

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <title>Title</title>
    <style>
        body{
            -moz-user-select: none;
            -webkit-user-select: none;
            position: relative;
        }
        #cav1,#cav2{
            border: 1px solid red;
            position: absolute;
        }
    </style>
</head>
<body>
<canvas id="cav1" width="400" height="300"></canvas>
<canvas id="cav2" width="400" height="300"></canvas>
<script>
    var cav1 = document.getElementById('cav1');
    var cav2 = document.getElementById('cav2');

    var cax1 = cav1.getContext('2d');
    var cax2 = cav2.getContext('2d');

    cax1.font = ('100px 微软雅黑');
    cax1.fillText('哈哈哈',50,150);
    cax2.fillStyle = '#ddd';
    cax2.fillRect(0,0,400,300);
    cax2.fill();
    cax2.globalCompositeOperation = 'destination-out';
    var offsetX = cav2.offsetLeft;
    var offsetY = cav2.offsetTop;

    var mousedown = false;
    function eventDown(e){
        e.preventDefault();
        mousedown = true;
    }
    function eventUp(e){
        e.preventDefault();
        mousedown = false;
    }
    //touches是当前屏幕上所有触摸点的列表;
    //targetTouches是当前对象上所有触摸点的列表;
    //changedTouches是涉及当前事件的触摸点的列表。
    function eventMove(e){
       e.preventDefault();
        if(mousedown){
            if(e.changedTouches){
               e=e.changedTouches[e.changedTouches.length-1];
            }
            var x = (e.clientX + document.body.scrollLeft) - offsetX || 0;
            var y = (e.clientY + document.body.scrollTop) - offsetY || 0;
            cax2.beginPath();
            cax2.fillStyle = 'rgba(0,0,0,1)';
            cax2.arc(x,y,20,0,2*Math.PI);
            cax2.fill();
            cax2.closePath();
        }
    }
    cav2.addEventListener('touchstart', eventDown);
    cav2.addEventListener('touchend', eventUp);
    cav2.addEventListener('touchmove', eventMove);
    cav2.addEventListener('mousedown', eventDown);
    cav2.addEventListener('mouseup', eventUp);
    cav2.addEventListener('mousemove', eventMove);
</script>
</body>
</html>

一个大土豆的日常

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
canvas的实例--你中奖了吗？刮刮乐

canvas–刮刮乐效果，常见于电商网站的刮奖环节<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Title</title> <styl
复制链接

扫一扫