<!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. Caffe + Ubuntu 14.04 64bit + CUDA 6.5 配置说明

    本文安装显卡驱动的方式已经过时, 最新安装说明请参考发布在Gist上的这篇文章,如有任何疑问,仍然欢迎在本文下留言 :P (本文档使用同一块NVIDIA显卡进行显示与计算, 如分别使用不同的显卡进行显 ...

  2. CSS默认可继承样式

    前面的话 一直想总结出一份可继承样式的列表.常听说,颜色和字体是可继承的,盒模型样式是不可继承的,但其他样式呢?本文内容包括所有可继承的样式 [注意]关于样式的详细信息移步至此 常用可继承样式 col ...

  3. JAVA实现Excel的读写--jxl

    前段时间因为开发网站的需要,研究了一下java实现excel的读写,一般当我们做管理软件时,都需要打印报表,报表如何制作呢?相信一定难为过大家,本篇就为大家揭开它的神秘面纱,学习完半篇,你一定会对报表 ...

  4. 在IIS中部署ASP.NET 5应用程序遭遇的问题

    用VS2015中创建了一个非常简单的ASP.NET5程序: 在Startup.cs中只输入一行代码: using System; using Microsoft.AspNet.Builder; usi ...

  5. Testing - 测试基础 - 方法

    选择和使用测试方法和工具 按照测试需求用途(或测试技巧)选择 在软件开发生命周期和软件测试流程中适当地选择 按照测试人员实际技能选择 选择可提供的和可执行的 测试方法 类别及技巧 目标 使用方法 举例 ...

  6. iOS_UIImage_裁切圆形头像

    github地址: https://github.com/mancongiOS/UIImage.git UIImage的Cagetory UIImage+ImageCircle.h - (UIImag ...

  7. QT学习笔记4

    顶层窗口-MainWindow 新建项目,选择基类的时Base Class是QMainWindow 最上面是Window Title,用于显示标题和控制按钮,比如最大化.最小化和关闭等:下面一些是Me ...

  8. angularJs指令深度分析

    AngularJs的指令定义大致如下 angular.module("app",[]).directive("directiveName",function() ...

  9. JavaScript最佳实践

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5540469.html 举个例子:用户在点击某个链接的时候弹出一个新窗口 弹出窗口的方法采用:wind ...

  10. ECLIPSE ANDROID PROJECT IMPORT SUMMARY

    ECLIPSE ANDROID PROJECT IMPORT SUMMARY======================================Manifest Merging:------- ...