好久没玩canvas了，随便写点效果玩玩。要开始重新拾起这门牛x的技术了，工作中不一定能用得上，以后说不定就能发挥用处了。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        canvas{border: 1px solid #ccc;background: url(http://p0.so.qhmsg.com/t01bf9deea2f89683d5.jpg) center/cover no-repeat}

    </style>

</head>

<body>

    <canvas id="canvas"></canvas>

    <script type="text/javascript">

        var canvas = document.getElementById('canvas'),

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

        canvas.width = 500;

        canvas.height = 500;

        ctx.fillStyle = '#ccc';

        ctx.fillRect(0,0,canvas.width,canvas.height);

        ctx.globalCompositeOperation = 'destination-out';

        ctx.lineWidth = 50;

        canvas.onmousedown = function(e){

            ctx.beginPath();

            ctx.lineTo(e.pageX,e.pageY);

            canvas.onmousemove = function(e){

                ctx.lineTo(e.pageX,e.pageY);

                ctx.stroke();

            };

            canvas.onmouseup = function(){

                canvas.onmousemove = null;

            }

        };

    </script>

</body>

</html>

简单canvas刮刮乐的更多相关文章

  1. canvas刮刮乐

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

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

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

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

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

  4. 用Canvas画一个刮刮乐

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

  5. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

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

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

  7. H5 Canvas刮刮乐

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

  8. HTML5 简单实现刮刮乐效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. canvas刮刮乐游戏等

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

  10. canvas 写一个刮刮乐抽奖

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

随机推荐

  1. MySqlException: The user specified as a definer ('root'@'%') does not exist解决方法

    之前因为MySql安全问题,将root@%改为允许特定ip段进行远程连接,结果有一个接口报The user specified as a definer ('root'@'%') does not e ...

  2. Oracle数据库多行记录转换一行并排序函数

    Oracle数据库多行记录转换一行并排序方法 在ORACLE数据库查询中,我们通常会要求用到将多行记录转换成一行并排序,这时候我们自然会想到Oracle的一个“wx_concat”函数,可以将多行记录 ...

  3. ASP.NET网页VS利用文件系统发布

    1.点击发布 2.选择发布方式,这里选择文件系统,并选择发布的路径 3.配置相关参数 4.点击发布按钮 5.发布成功后文件夹下生成的文件 ..

  4. MPU6050学习笔记（电源管理器1、2）

    Technorati Tags: 嵌入式开发.模块开发 寄存器107号:电源管理器1 PWR_MGMT_1: Description: This register allows the user to ...

  5. WinForm ListView不分页加载大量数据

    WinForm的ListView在加载大量数据时会出现闪烁的问题,同时数据加载很慢.如果你的列表中有超过千条的数据且不做特殊处理还是用普通的ListView.Items.Add(),估计你的用户得抱怨 ...

  6. 【cocos2d-x 仙凡奇缘-网游研发（1） 登录&注册】

    转载请注明出处:http://www.cnblogs.com/zisou/p/xianfan01.html 公司的项目总算告一段落了,年前憋到年后,总算要上线了,所以我也有了时间来搞我自己的游戏项目了 ...

  7. git提交忽略文件或文件夹

    在项目根目录下面 添加 .gitignore文件 文件中每一行表示需要忽略的文件的正则表达式. .gitignore文件过滤有两种模式,开放模式和保守模式 1. 开放模式负责设置过滤哪些文件和文件夹 ...

  8. ASP.NET Core获取客户端IP地址

    1.在ConfigureServices注入IHttpContextAccessor // ASP.NET Core 2.1的注入方式 //services.AddHttpContextAccesso ...

  9. Java基础学习篇---------封装

    一.类和对象分配内存 二.Java中的内部类  : 可以直接去访问外部类的所有属性(包括私有成员) 1.Java中成员内部类 (1).内部类的方法可以直接访问外部类的类中的所有成员变量 (2).外部类 ...

  10. docker 网络实践

    #docker 网络模式 环境 centos7. , Docker version -ce docker自带网络类型 bridge,host,none,container,overlay,macvla ...