<!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. JavaScript 模板引擎实现原理解析

    1.入门实例 首先我们来看一个简单模板: <script type="template" id="template"> <h2> < ...

  2. String详解

    在开发中,我们都会频繁的使用String类,掌握String的实现和常用方法是必不可少的,当然,我们还需要了解它的内部实现. 一. String的实现 在Java中,采用了一个char数组实现Stri ...

  3. 再谈collections模块defaultdict()和namedtuple()

    defaultdict()和namedtuple()是collections模块里面2个很实用的扩展类型.一个继承自dict系统内置类型,一个继承自tuple系统内置类型.在扩展的同时都添加了额外的很 ...

  4. poj 2528 Mayor's posters（线段树+离散化）

    /* poj 2528 Mayor's posters 线段树 + 离散化 离散化的理解: 给你一系列的正整数, 例如 1, 4 , 100, 1000000000, 如果利用线段树求解的话,很明显 ...

  5. 使用ExifInterface设置Datetime发生的问题

    最近在弄一个Android小程序,需要把图像的生成时间设置到Exif的Datetime,用ExifInterface.setAttribute(ExifInterface.TAG_DATETIME,& ...

  6. C#中使用Oracle存储过程返回结果集

    问题: 在MSSQLServer中定义的存储过程可以直接返回一个数据集,如: create procedure sp_getAllEmployees as SELECT * FROM [NORTHWN ...

  7. Deep learning：五十(Deconvolution Network简单理解)

    深度网络结构是由多个单层网络叠加而成的,而常见的单层网络按照编码解码情况可以分为下面3类: 既有encoder部分也有decoder部分:比如常见的RBM系列(由RBM可构成的DBM, DBN等),a ...

  8. ASP.NET MVC系列:添加模型的验证规则

    首先,在模型类中引用 System.ComponentModel.DataAnnotations 命名空间;System.ComponentModel.DataAnnotations 命名空间提供定义 ...

  9. 插入排序---直接插入排序算法（Javascript版）

    将n个元素的数列分为已有序和无序两个部分. 数列:{a1,a2,a3,a4,…,an} 将该数列的第一元素视为有序数列,后面都视为无序数列: {{a1},{a2,a3,a4,…,an}} 将无序数列中 ...

  10. 关于C#基础

    前几天帮人做个社交网站,还是用的控件方式,不过学习了ajax和一般处理程序ashx后,也用在了里面一些,今天回来继续写博客.继续上次总结下基础知识,学的内容多,总结的可能比较杂乱,分条总结为平时能自己 ...