<!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. 使用XSD校验Mybatis的SqlMapper配置文件(2)

    编写好XSD文件,然后来看怎么使用XSD文件校验,并解析SqlMapper文件,也就是实现doParseSqlMapperResourceWithSchema()方法. 为了实现这个功能,有两个基本要 ...

  2. TSql Output 用法

    第一部分:TSql Output 关键字有两种应用场景 1,作为存储过程的参数类型,从存储过程中返回数据 2,返回受 INSERT.UPDATE.DELETE 或 MERGE 语句影响的各行中的信息, ...

  3. FileUpload实现文件上传（包含多文件）

    package com.hzml.serve; import java.io.File; import java.io.IOException; import java.io.PrintWriter; ...

  4. （转）rlwrap真是一个好东西

    在Linux下面使用sqlplus很不爽,上下键,退格键都不能用,严重降低生产效率. 某一天终于发现了这个rlwrap这个好东西,特写此文记录. 下载地址如下: http://utopia.knowa ...

  5. 【web前端面试题整理02】前端面试题第二弹袭来，接招！

    前言 今天本来准备先了解下node.js的,但是,看看我们一个小时前与一个小时后的差距: 既然如此,我们继续来搜集我们的前端面试题大业吧!!! 特别感谢玉面小肥鱼提供哟,@玉面小飞鱼 题目一览 Jav ...

  6. .NET 三层架构的简单规划

    今天心血来潮简单看了下petshop4.0的源代码,他就是用三层架构来实现的.现在简单的做下总结. 首先我们先看下petshop的三层架构. 1 WEB 表示层 2 Model 业务实体 3 BLL ...

  7. 轻松自动化---selenium-webdriver(python) (十)

    本节重点 处理下拉框 switch_to_alert() accept() 下拉框是我们最常见的一种页面元素,对于一般的元素,我们只需要一次就定位,但下拉框里的内容需要进行两次定位,先定位到下拉框,再 ...

  8. html中获取图片的真实尺寸

    使用js得到图片的真实尺寸,下面就是js代码: <html> <head> <script type="text/javascript" src=&q ...

  9. 运用javascript的成员访问特性来实现通用版的兼容所有浏览器的打开对话框功能

    打开网页对话框,一般有三种方法:window.open.window.showModalDialog.window.showModelessDialog,每一种都有它的优点与不足.第一种方法:wind ...

  10. Java魔法堂：JVM的运行模式

    一.前言 JVM有Client和Server两种运行模式.不同的模式对应不同的应用场景,而JVM也会有相应的优化.本文将记录JVM模式的信息,以便日后查阅. 二.介绍 在$JAVA_HOME/jre/ ...