<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .container {

            width: 400px;

            height: 200px;

            border: 1px dotted red;

            margin: 100px auto;

        }

    </style>

</head>

<body>

<div class="container">

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

</div>

<script>

    var cv = document.getElementById("c");

    var ctx = cv.getContext("2d");

    cv.width = 400;

    cv.height = 200;

    // 奖品设置

    var prizesArr = [

        {name: "iPhone7 亮黑版", color: "rgba(0, 0, 0, 1)"},

        {name: "iPhone7 黑色版", color: "rgba(0, 0, 0, .6)"},

        {name: "iPhone7 安卓版", color: "rgba(0, 255, 0, 1)"},

        {name: "iPhone7 塞班版", color: "rgba(255, 0, 0, 1)"}

    ];

    // 随机获取到一个奖品

    var prizeObj = prizesArr[ Math.floor(Math.random() * 4) ];

    // 思路：

    // 1 先将文字绘制到画布中

    // 2 将画布转化为 Base64 格式的图片

    // 3 将图片设置为canvas的背景图片

    // 4 给canvas画布填充灰色的矩形

    // 5 绑定鼠标事件

    // 1 设置文字的坐标

    var x0 = cv.width / 2, y0 = cv.height / 2;

    ctx.textAlign = "center";

    ctx.textBaseLine = "middle";

    ctx.font = "30px 微软雅黑";

    ctx.fillStyle = prizeObj.color;

    ctx.fillText(prizeObj.name, x0, y0);

    // 2 将画布转化为图片

    var img = cv.toDataURL("image/jpg", 1);

    // 3 将图片设置为canvas的背景图片

    cv.style.backgroundImage = "url(" + img + ")";

    // 4 给canvas画布填充灰色的矩形

    ctx.fillStyle = "silver";

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

    //

    // 判断是否点击了 canvas

    var isStart = false;

    var radius = 10;

    cv.onmousedown = function() {

        isStart = true;

    };

    cv.onmouseup = function() {

        isStart = false;

        //  默认值

        ctx.globalCompositeOperation =  'source-over';

    };

    cv.onmousemove = function(e) {

        // 原有内容中与新图形不重叠的部分会被保留， 重叠的部分，没有了

        ctx.globalCompositeOperation = "destination-out";

        if(isStart) {

            // 如果开关是 true ，才执行擦出效果

            ctx.beginPath();

            // ctx.arc()

            var x = e.clientX - cv.offsetLeft;

            var y = e.clientY - cv.offsetTop;

            // ctx.fillStyle = "rgba(0, 0, 0, 1)";

            ctx.arc(x, y, radius, 0, Math.PI * 2);

            ctx.fill();

        }

    };

</script>

</body>

</html>

canvas制作刮刮乐案例的更多相关文章

  1. 20行js代码制作网页刮刮乐

    分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码效果如下 盖伦.jpg 刮刮乐.gif HTML部分 <body> ![](img/gailun.jpg) &l ...

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

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

  3. H5 Canvas刮刮乐

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

  4. canvas刮刮乐

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

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

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

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

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

  7. canvas刮刮乐游戏等

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

  8. canvas 写一个刮刮乐抽奖

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

  9. 赵雅智_Android案例_刮刮乐

    实现效果 主要代码 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns ...

  10. canvas之刮刮乐

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. oracle 表锁定解锁

    Oracle数据库操作中,我们有时会用到锁表查询以及解锁和kill进程等操作,那么这些操作是怎么实现的呢?本文我们主要就介绍一下这部分内容.(1)锁表查询的代码有以下的形式:select count( ...

  2. （转）RabbitMQ学习之集群部署

    http://blog.csdn.net/zhu_tianwei/article/details/40931971 我们先搭建一个普通集群模式,在这个模式基础上再配置镜像模式实现高可用,Rabbit集 ...

  3. vc++如何创建程序-设置断点-函数的覆盖，c++的多态性

    ---恢复内容开始--- 如何设置断点小笔记 将光标移动到你想设置断点的地方,按一下F9键即可,或者你可以用鼠标左键点击小手图标. CommentOut多行注释 函数的覆盖是在父类与子类之间的,函数的 ...

  4. Nginx+keepalived双机热备（默认路径安装）- 基础篇

    负载均衡技术对于一个网站尤其是大型网站的web服务器集群来说是至关重要的!做好负载均衡架构,可以实现故障转移和高可用环境,避免单点故障,保证网站健康持续运行.关于负载均衡介绍,可以参考:linux负载 ...

  5. WEBGL学习【七】画布绘图

    主要是对WEBGL的绘图部分进行了进一步加强的认识和理解 <!DOCTYPE HTML> <html lang="en"> <head> < ...

  6. Project Euler 37 Truncatable primes

    题意:3797有着奇特的性质.不仅它本身是一个素数,而且如果从左往右逐一截去数字,剩下的仍然都是素数:3797.797.97和7:同样地,如果从右往左逐一截去数字,剩下的也依然都是素数:3797.37 ...

  7. HDU1846 - Brave Game【巴什博弈】

    十年前读大学的时候,中国每年都要从国外引进一些电影大片,其中有一部电影就叫<勇敢者的游戏>(英文名称:Zathura),一直到现在,我依然对于电影中的部分电脑特技印象深刻.  今天,大家选 ...

  8. MySQL 数据库类型

  9. 玩家福音：10款最佳Linux免费游戏

    “我能在Linux平台上游戏吗?”这类疑问正困扰游戏玩家,那么答案就是“快去Linux平台吧!”.开源组织一直以来坚持不懈为Linux操作系统开发不同类型的游戏,在Linux平台下的游戏完全不亚于其他 ...

  10. 《代码敲不队》第八次团队作业：Alpha冲刺 第四天

    项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 代码敲不队 作业学习目标 掌握软件编码实现的工程要求. 团队项目github仓库地址链接 GitH ...