好久没玩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. Android-控制整个APP的异常收集与处理

    控制整个App的异常收集与处理,使用前记得要在Application中初始化initCrasHandler CrasHandler APP异常收集类: package common.library.e ...

  2. DevOps Workshop 研发运维一体化（广州站）

    第一天对软件开发的需求管理.项目计划和源代码管理进行的全面而深入的介绍,并且为到会的所有开发人员提供现场动手实验的机会,大家兴致高涨,按照我们的操作手册完成了所有实验课题. 第二天主要介绍了最新的自动 ...

  3. Microsoft Sql Server 2016安装在CentOS7下

    安装过程 如何安装直接参考这个文章:安装sql server 整个安装过程非常简单. 上面的文档里是通过 sudo 命令,用root身份来执行,不过这里为了简单,就用root账号来安装的. (1)下载 ...

  4. .net加密web.config文件

    这篇文章我将介绍如何利用ASP.NET来加密和解密Web.config中连接字符串,之前只写了第二种方式,现在将两种方式都写出来,供大家参考.不管使用哪种方式我们在程序中都不需要写任何代码来解密连接字 ...

  5. 反射获取属性DisplayName特性名字以及属性值

    /// <summary> /// 反射获取所有DisplayName标记值 /// </summary> /// <typeparam name="T&quo ...

  6. Linux下安装python虚拟环境(virtualenv,vritulaenvwrapper)

    一.virtualenv virtualenv是如何创建"独立"的Python运行环境的呢? 原理很简单,就是把系统Python复制一份到virtualenv的环境,用命令sour ...

  7. jzoj5945

    這題是均分紙牌求方案數 我們可以分2種情況討論: 1.當前面部分的平均值>=現在我們要的值 那麼我們可以把所有牌都放到第i個點,現在若有k張牌,則要把k−i∗avek-i*avek−i∗ave張 ...

  8. Django(完整的登录示例、render字符串替换和redirect跳转)

    day61 1. 登录的完整示例                       复习:         form表单往后端提交数据需要注意哪三点:  五一回来默写    <-- 谁写错成from谁 ...

  9. 不再需要ImageOle或DynamicGifCtl，.NET实现IM编辑控件

    多年前写过一篇文章<C# 实现IM聊天信息输入显示控件(1)-显示GIF动画图片>,主要是使用ActiveX控件实现RichTextBox插入gif动画图片,包括使用QQ的ImageOle ...

  10. 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题

    https://www.cnblogs.com/yangjie-space/p/4816279.html html5shiv.js和respond.min.js 做页面常用的东西,写这里用的时候省点去 ...