<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <canvas id="canvas" width="720" height="720">

        </canvas>

        <script type="text/javascript">

            var canvas = document.getElementById("canvas");

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

            canvas.style.background = "url(img/song.jpg) no-repeat";

            ctx.fillStyle = "#999";

            ctx.globalCompositeOperation = 'destination-over';

            ctx.beginPath();

            ctx.fillRect(0,0,720,720);

            ctx.closePath();

            canvas.onmousemove = function(ev){

                var ev = ev||window.event;

                var x = ev.pageX-this.offsetLeft;

                var y = ev.pageY-this.offsetTop;

                ctx.fillStyle = "#000";

                ctx.beginPath();

                ctx.globalCompositeOperation = 'destination-out';

                ctx.arc(x,y,20,0,2*Math.PI,true);

                ctx.closePath();

                ctx.fill();

            }

        </script>

    </body>

</html>

canvas滤镜-刮刮乐的更多相关文章

  1. 游戏的套路你知道吗？ H5 Canvas刮刮乐

    玩游戏的人 很多时候都会遇到翻牌子  开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结  指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了  其实很多时候在你点开那个 ...

  2. H5 Canvas刮刮乐

    玩游戏的人 很多时候都会遇到翻牌子  开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结  指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了  其实很多时候在你点开那个 ...

  3. canvas刮刮乐

    这周有点迷茫,不知道干嘛了,一天天就过去了!我在博客右侧公告栏加了qq交流,各位有好的主题,或者有趣的技术,欢迎交流!今天突发奇想,就写了2个h5 canvas的demo玩玩! demo一:刮刮乐 舍 ...

  4. 【Android界面实现】使用Canvas对象实现“刮刮乐”效果

    在淘宝.京东等电商举办活动的时候,常常能够看到在移动client推出的各种刮奖活动,而这样的活动也受到了非常多人的喜爱.从client的体验来说,这样的效果应该是通过网页来实现的,那么,我们使用And ...

  5. HTML5 CSS3 诱人的实例 ：canvas 模拟实现电子彩票刮刮乐

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34089553 今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的, ...

  6. canvas刮刮乐游戏等

    裁剪 ctx.clip():当前路径外的区域不再绘制 <canvas id="cans" width=500 height=500></canvas> &l ...

  7. canvas 写一个刮刮乐抽奖

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. canvas之刮刮乐

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. 用Canvas画一个刮刮乐

    Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...

  10. canvas刮刮乐效果（pc端&H5、zepto-touchmove）

    一.html <div id="canvasArea" style="width:300px;height:200px;position:relative;&quo ...

随机推荐

  1. Lookup 组件异常

    Lookup组件有两个数据源,一个是上流组件的输出,一个是组件lookup的数据源,这个数据源是在Connection选项卡中进行配置.在开发package的过程中,我发现一个异常,当Lookup数据 ...

  2. Socket实现仿QQ聊天（可部署于广域网）附源码（1）-简介

    1.前言 本次实现的这个聊天工具是我去年c#程序设计课程所写的Socket仿QQ聊天,由于当时候没有自己的服务器,只能在机房局域网内进行测试,最近在腾讯云上买了一台云主机(本人学生党,腾讯云有个学生专 ...

  3. 如果正确读取SQL Server中的扩展事件？

        SQL Server中使用扩展事件捕捉所需的信息后,可以选择存放的位置.比如说内存或文件中,但无论存在哪里,其本质都是一个大XML.因此在SQL Server中读取该XML就是解析扩展事件结果 ...

  4. 一步一步教你安装openstack

    openstack,安装的门槛比较高,而且相当麻烦,很多的安装文档作者省了不少安装步骤.这对初学的人带来了很大的麻烦,也许作者轻易节省一步,就会创成后面的安装失败.而且初学者由于对openstack不 ...

  5. 【踩坑经历】一次Asp.NET小网站部署踩坑和解决经历

    2013年给1个大学的小客户部署过一个小型的Asp.NET网站,非常小,用的sqlite数据库,今年人家说要换台服务器,要重新部署一下,好吧,虽然早就过了服务时间,但无奈谁叫人家是客户了,二话不说,上 ...

  6. Anliven - 你的学习为何如此低效？！

    拖延 适时学习的本质就是营造机会,具有强烈的时效性,而拖延能够毁灭所有机会! 一个得不到执行的完美计划,比不上一次仓促的执行! 盲目 缺少有效的策略和方法,没有弄清基本的问题(需求--->性质- ...

  7. Database Primary key and Foreign key [From Internet]

    Database Primary key and Foreign key --Create Referenced Table CREATE TABLE Department ( DeptID int ...

  8. APP账号密码传输安全分析

            最近在搞公司的安卓APP测试(ThinkDrive 企邮云网盘)测试,安卓app测试时使用代理抓包,发现所此app使用HTTP传输账号密码,且密码只是普通MD5加密,存在安全隐患,无法 ...

  9. Azure SQL Database (1) 用户手册

    <Windows Azure Platform 系列文章目录> 最新更新2016年6月17日 下载地址:Azure SQL Database用户手册

  10. js基础篇——cookie使用要点

    1.Cookie数量和长度的限制.各个浏览器的限制不同IE7+和Firefox最大限制为50条,chrome和Safari无限制,IE6-最大限制20条.且所有浏览器限制每个cookie长度不能超过4 ...