好久没玩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. Transaction And Lock--使用资源锁来控制并发

    写过程序的朋友都知道,在多线程处理时,对于非线程安全的对象,需用使用锁定特定对象(LOCK)的方法来保证串行操作.曾经有位开发询问我,在SQL Server内部是否有类似的实现方法来控制某一操作不能并 ...

  2. ASP.NET MVC＋Redis （准备工作）

    今天准备更新这个项目的第二篇博客.有一点需要说明的是之前觉得用的是Asp.net的WebPage,经过查看微软的官方文档还有相关的博客,相比较而言使用起来需要安装一个自动工具WebMatrix可以很快 ...

  3. 使用nexus来搭建Nuget私服

    近期在搭建nuget私服.选择nexus这个产品.nexus支持npm,.nuget等,功能比较强大. 前言 博主使用centos7.5来搭建nexus,遇到了不少的问题.最后还是搞定了. 1:下载n ...

  4. c# async Task await Result 死锁

    最近项目数据量较大,使用 async Task异步增加执行效率 遇到问题,当前有2个计算非常耗时,现在需要你优化一下,这2个计算并行执行,2个计算执行完成后将2个结果sum返回给用户 当前我是这样实现 ...

  5. westrac server security configure user info

    security userkey:westracpass:Set#@!123

  6. $_SERVER[]数组解析

    $_SERVER['PHP_SELF'] 将会得到 /test.php/foo.bar 这个结果.__FILE__ 常量包含当前(例如包含)文件的绝对路径和文件名. 如果 PHP 以命令行方式运行,该 ...

  7. linux中 ll 和ls 区别

    ll 列出来的结果详细,有时间,是否可读写等信息 ,象windows里的 详细信息ls 只列出文件名或目录名 就象windows里的  列表 ll -t 是降序,  ll -t | tac 是升序 l ...

  8. 这几天bug多，自我检讨一下

    这段时间(主要指4月底到5月初)写的bug超过以往总和,觉得很有必要停一下,找找原因.所谓前车之鉴后车之师,不能也不应该在同一地方跌倒N次吧: 为什么bug频出? 深究原因,并不是代码量大.功能多,反 ...

  9. IdentityServer4 密码模式实现

    1.  修改 Config.cs using System.Collections; using System.Collections.Generic; using IdentityServer4.M ...

  10. 消息中间件（一）MQ详解及四大MQ比较

    一.消息中间件相关知识 1.概述 消息队列已经逐渐成为企业IT系统内部通信的核心手段.它具有低耦合.可靠投递.广播.流量控制.最终一致性等一系列功能,成为异步RPC的主要手段之一.当今市面上有很多主流 ...