canvas-刮刮卡实例

最新推荐文章于 2024-09-29 23:41:25 发布
最新推荐文章于 2024-09-29 23:41:25 发布
阅读量629 收藏
点赞数 1
文章标签： HTML5 canvas touch事件 图像处理 用户体验
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54057363/article/details/123407668
版权

<!DOCTYPE html>

<meta lang="en">

<meta>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"></meta>

    <title>刮刮卡优化</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        body,html {

            height: 100%;

            overflow: hidden;

        }

        #outer,ul,ul>li {

            height: 100%;

        }

        ul>li{

            background: url(./bg3.png);

            background-size: (100%,100%);

        }

        #test{

            position: absolute;

            left: 0;

            top: 0;

            transition: 1s;            

        }

    </style>

</head>

<body>

    <div id="outer">

    <canvas id="test" width="300" height="300">

        <span>您的浏览器版本过低,请更换IE-9以上,或使用chrome等其他浏览器</span>

    </canvas>

    <ul>

        <li></li>

    </ul>

</div>

    <script type="text/javascript">

            window.onload = function(){

            /** @type {HTMLCanvasElement} */

            //1.获取画布

            var canvas = document.querySelector('#test');

            canvas.width = document.documentElement.clientWidth;

            canvas.height = document.documentElement.clientHeight;

            if (canvas.getContext) {

                //2.获取画笔

                var ctx = canvas.getContext('2d');

                var img = new Image();

                img.src = './bg.png';

                img.onload = function(){

                    draw();

                }

                function draw(){

                    var flag = 0;

                    ctx.drawImage(img,0,0,canvas.width,canvas.height);

                    canvas.addEventListener('touchstart',function(ev){

                        ev = ev||event; //兼容

                        var touchC = ev.changedTouches[0]; //changedTouches代表手指列表

                        var x = touchC.clientX - canvas.offsetLeft;

                        var y = touchC.clientY - canvas.offsetTop;

                        ctx.lineWidth = 40;

                        ctx.lineCap = 'round';

                        ctx.lineJoin = 'round';

                        ctx.save();

                        ctx.globalCompositeOperation = 'destination-out';

                        ctx.beginPath();

                        ctx.moveTo(x,y);  //画一条直线,不画圆,圆会出现bug

                        ctx.lineTo(x+1,y+1)

                        ctx.stroke();

                        ctx.restore();

                    })

                    canvas.addEventListener('touchmove',function(ev){

                        ev = ev||event; //兼容

                        var touchC = ev.changedTouches[0]; //changedTouches代表手指列表

                        var x = touchC.clientX - canvas.offsetLeft;

                        var y = touchC.clientY - canvas.offsetTop;

                        ctx.save();

                        ctx.globalCompositeOperation = 'destination-out';

                        /*ctx.arc(x,y,20,0,360*Math.PI/180);*/

                        ctx.lineTo(x,y);

                        ctx.stroke();

                        ctx.restore();

                    })

                    canvas.addEventListener('touchend',function(){

                        var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);

                        var allPx = imageData.width * imageData.height;

                        for(var i=0; i<allPx; i++){

                            if(imageData.data[4*i+3]===0){

                                flag++;

                            }

                        }

                        if(flag >= allPx / 2){

                            canvas.style.opacity = 0;

                        }

                    })

                             

                    canvas.addEventListener('transitionend',function(){

                        this.remove();

                    })

                       }

                     }

                }

    </script>

</body>

</html>

LLL。。
关注
刮刮卡
qq_24551315的博客
12-30 490
package com.example.zz.view; import com.example.zz.R; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import an
厉害了！异名程序员的刮刮卡教程
奎特尔星球
04-11 816
刮刮卡大家生活里都使用过，像奖券，优惠券，外卖好评卡什么的。有时候游戏里面也需要用到。Scratch_ticket实现思路一个完整的刮刮卡需要有这三个功能，刮开涂层、刮开比例、重置。整...
刮刮卡的实现
02-16 395
自定义view public class TestGuaGuaView extends View { private Paint mPaint; private Paint mPaint1; private Path mPath; private Bitmap mBitmap, mBitmap1; private Canvas mCanvas; p
Xfermode实现刮刮卡
mingyunxiaohai的专栏
03-30 247
想要实现一个刮刮卡的效果，其中的一种方法就是使用图层混合模式Xfermode，想要很好的理解Xfermode，我们需要先结合着谷歌的例子来。 官方的源码我们可以在这里获得 https://github.com/THEONE10211024/ApiDemos/blob/master/app/src/main/java/com/example/android/apis/graphics/Xfermod...
刮刮卡功能的具体实现
Zero
09-09 3299
今天整理之前的代码，忽然看到之前自己写的一个刮刮卡，整理下以便以后使用，同时分享给需要的朋友，如有错误，还请多多指正。实现的步骤，其实就是徒手画三个图层叠加在一起，最上层是绘制需要的问题，就是以上所述的“骚年，刮我吧”，第二层就是覆盖宽高的灰层，第三层是结果层，多的不啰嗦了，具体实现如下，附上详细注释。/** * * created by zero on 2016-9-9 * * 刮刮卡
canvas 刮刮卡
weixin_46413834的博客
10-09 210
首先了解HTML中canvas的globalCompositeOperation 属性 globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有的）的图像上。 源图像 = 您打算放置到画布上的绘图。 目标图像 = 您已经放置在画布上的绘图。 属性值 默认值为source-over 源图像叠加在目标图像上 source-atop 在目标图像顶部显示源图像,源图像位于目标图像之外的部分是不可见的 source-in
HTML5 Canvas刮刮卡效果 实例
lufei1993425的博客
05-25 1308
近年来由于移动设备对HTML5的较好支持，经常有活动用刮奖的效果，最近也在看H5方面的内容，就自己实现了一个，现分享出来跟大家交流。 1、效果 2、原理 原理很简单，就是在刮奖区添加两个canvas，第一个canvas用于显示刮开后显示的内容，可以是一张图片或一个字符串，第二个canvas用于显示涂层，可以用一张图片或用纯色填充，第二个canvas覆盖在第一个canvas上面
用 Canvas 制作刮刮卡
weixin_30632899的博客
04-04 143
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
HTML5 Canvas实现刮刮卡效果实例
weixin_30484247的博客
09-22 250
HTML： <style> #canvas { border: 1px solid blue; position: absolute; left: 10px; top: 10px; background:url(../Images/1.jpg) no-repeat center center; background-s...
html5 Canvas刮刮卡效果 实例
08-02
近年来由于移动设备对HTML5的较好支持，经常有活动用刮奖的效果，最近也在看H5方面的内容，就自己实现了一个，现分享出来跟大家交流。
canvas实现刮刮卡效果
08-31
今天我们要介绍的是使用Canvas实现刮刮卡效果的实例。 什么是刮刮卡效果？ 刮刮卡效果是一种常见的交互效果，在很多网站和应用程序中都可以看到。它的特点是用户可以通过点击、滑动或手指滑动来揭示隐藏的内容。...
html5中canvas实现刮刮卡
09-21
HTML5中的Canvas是一个强大的绘图工具，允许开发者在网页上...通过这个实例，我们可以学习到Canvas的基本绘图方法、事件处理以及动态交互的实现技巧。同时，它也展示了HTML5在创建富互联网应用（RIA）方面的强大能力。
HTML5 canvas移动端手机刮刮卡代码.zip
05-23
综上所述，这个压缩包提供的代码示例是一个实用的HTML5 canvas应用实例，它展示了如何结合JavaScript和canvas技术来实现移动端的刮刮卡效果。通过学习和理解这个代码，开发者可以进一步提升在网页交互设计上的技能，...
【JavaScript源代码】canvas绘制刮刮卡效果.docx
12-28
本实例将详细介绍如何使用HTML5的canvas元素来创建刮刮卡效果。 首先，我们需要一个HTML页面作为容器，包含一个`div`元素作为刮刮卡的覆盖层，以及一个`canvas`元素用于绘制刮刮卡的背景和文字。以下是一个简单的...
基于HTML、CSS和JavaScript的滚动数字显示效果，类似于老式计数器或电子表上的数字滚动效果
2201_76060199的博客
09-29 323
这段代码创建了一个数字滚动显示效果，用户可以通过输入框输入金额，或点击按钮生成随机数字，金额数字会以滚动的方式显示。CSS负责布局和样式，JavaScript负责动画效果和逻辑处理。代码中多次使用了相同的IDcounter，这在实际开发中是不推荐的，ID应该是唯一的，这里可能是为了简化示例而重复使用。
【前端开发入门】html快速入门
最新发布
qbbmnnnnnn的博客
09-29 510
本篇介绍html的相关内容，包含文档流的概念以及块级元素和行内元素等。同时强调了有关代码编写习惯性问题。
vue2加载本地html文件
大华的程序人生
09-25 344
文件夹，static文件夹下放置需要展示的html文件，有没有static都没问题，需要在public文件夹下。1、在public文件夹下创建。
【CSS/HTML】左侧固定，右侧自适应的布局方式理解margin负值理论
mengran_code的博客
09-29 385
简单解释下flex: 0 0 200px的用处，flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。它的默认值为auto，即项目的本来大小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。是固定宽度的div脱离文档流。
使用Canvas绘制刮刮卡效果教程
资源摘要信息:"Canvas实现刮刮卡效果.zip" 知识点一：Canvas基础 Canvas是HTML5新增的元素，提供了脚本（通常是JavaScript）操作画布的API。它允许在网页上绘制图形，包括线条、矩形、圆形、多边形等。通过Canvas，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值