<!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. Findbugs分析工具介绍

    Findbugs是一个静态分析工具,它检查类或者JAR 文件,将字节码与一组缺陷模式进行对比以发现可能的问题.Findbugs自带检测器,其中有60余种Bad practice,80余种Correct ...

  2. 使用boost.python进行混合开发

    使用boost.python进行混合开发 原文请参照官网和各方参考,本文有改动! 参考链接:http://blog.csdn.net/lanbing510/article/details/121979 ...

  3. Xcode8 NSLog打印json不完整的解决方案

    解决方案:自定义宏,通过fprintf函数打印log,完美解决! #ifdef DEBUG #define NSLog(FORMAT, ...) fprintf(stderr, "%s:%z ...

  4. java学习笔记5——String类常用方法

    1.字符串长度计算: int i = String1.length(); 2.字符串比较:1) equals()和equalsIgnoreCase //比较两个字符串对象的实体是否相同,相同输出tru ...

  5. 【领略RxSwift源码】- 变换操作（Operators）

    在上一篇中,我们分析了在RxSwift中的整个订阅流程.在开讲变换操作之前,首先要弄清楚Sink的概念,不清楚的同学可以翻看上一篇的分析.简单的来说,在每一次订阅操作之前都会进行一次Sink对流的操作 ...

  6. Asp.net Core 源码-PagedList<T>

    using System.Collections.Generic; using System.Linq; using System; using System.Linq.Expressions; us ...

  7. bzoj 1192: [HNOI2006]鬼谷子的钱袋 思维_二进制

    十分巧妙的一道题. 考虑当前凑出$[1,i/2)$,那么再有一个 $i/2$,就可以凑出 [i/2+1,i). 注意,这里的 $i$ 都是 2 的 $k$ 次幂. 于是,我们只要找到 $i$ 使得 2 ...

  8. 路飞学城Python-Day59(第五模块思维导图)

  9. Java 习惯用法总结

    转自:http://www.importnew.com/15605.html 首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 我要投稿 更多频道 » Java 习惯用法总结 2015/04/ ...

  10. jquery.lazyload滚动不起作用

    昨天同事在开发图片懒加载功能时用到了lazyload,使用相当标准,然而结果却不如人意,在滚动时未能起作用.引用https://cdn.bootcss.com/jquery_lazyload/1.9. ...