<!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. phpExcel导出大量数据出现内存溢出错误的解决方法

    phpExcel将读取的单元格信息保存在内存中,我们可以通过 代码如下:PHPExcel_Settings::setCacheStorageMethod() 来设置不同的缓存方式,已达到降低内存消耗的 ...

  2. 用JS解决Asp.net Mvc返回JsonResult中DateTime类型数据格式的问题

    当用ajax异步时,返回JsonResult格式的时候,发现当字段是dateTime类型时,返回的json格式既然是“/Date(1435542121135)/” 这样子的,当然这不是我们想要的格式. ...

  3. Qwt--散点图/函数图

    1.Qwt库 QwtPlot是用来绘制二维图像的widget.在它的画板上可以无限制的显示绘画组件.绘画组件可以是曲线(QwtPlotCurve).标记(QwtPlotMarker).网格(QwtPl ...

  4. Boost多线程-替换MFC线程

           Mfc的多线程看起来简单,可以把线程直接压入向量,由系统类似进行调配,其实在内存的处理问题上留下了漏洞.在新线程里面载入大量流,会导致内存泄露. 方便之处:直接使用结构体传入函数参数,供 ...

  5. SVD分解.潜语义分析.PythonCode

    原文链接:http://www.cnblogs.com/appler/archive/2012/02/02/2335886.html 原始英文链接:http://www.puffinwarellc.c ...

  6. 应运而生！ 双11当天处理数据5PB—HiStore助力打造全球最大列存储数据库

    阿里巴巴电商业务中历史数据存储与查询相关业务, 大量采用基于列存储技术的HiStore数据库,双11当天HiStore引擎处理数据记录超过6万亿条.原始存储数据量超过5PB.从单日数据处理量上看,该系 ...

  7. Vue2实例中的data属性三种写法与作用

    <script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app ...

  8. kernel 3.10内核源码分析--hung task机制

    kernel 3.10内核源码分析--hung task机制 一.相关知识: 长期以来,处于D状态(TASK_UNINTERRUPTIBLE状态)的进程 都是让人比较烦恼的问题,处于D状态的进程不能接 ...

  9. Linux-workqueue讲解

    =============  参考  ============= 代码:linux-3.10.65/kernel/workqueue.c =============================== ...

  10. 指针FHQTreap

    不太友好的代码 题面依旧是普通平衡树 //Writer : Hsz %WJMZBMR%tourist%hzwer #include <bits/stdc++.h> #define LL l ...