<!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. Jmeter报内存溢出解决方案

    描述:wimdows环境,做上传图片接口测试,涉及图片合成和上传,图片采用base64编码.每1s启动200线程的时候,Jmeter报内存溢出错误. 解决方案: 1.修改jmeter.bat: set ...

  2. adb使用实践

    目录 1. adb 端口占用 2. 查看包名和MainAcitivity =============================================================== ...

  3. SDL2源代码分析

    1:初始化(SDL_Init()) SDL简介 有关SDL的简介在<最简单的视音频播放示例7:SDL2播放RGB/YUV>以及<最简单的视音频播放示例9:SDL2播放PCM>中 ...

  4. SpringMVC(一) HelloWorld

    学习新东西的的第一个程序--HelloWorld,以下是SpringMVC的HelloWorld 第一步: 用MAVEN 创建webapp,并添加依赖.(强烈建议使用MAVEN,MAVEN学习书籍和视 ...

  5. 理解Faster-RCNN 中的Anchor

    先上图看一下Faster R-CNN操作流程:  图片说明:Faster R-CNN=Fast R-CNN+RPN,其中Fast R-CNN结构不变:RPN负责生成proposals,配合最后一层的f ...

  6. java中Map遍历的四种方式

    在java中所有的map都实现了Map接口,因此所有的Map(如HashMap, TreeMap, LinkedHashMap, Hashtable等)都可以用以下的方式去遍历. 方法一:在for循环 ...

  7. Iterator和for...of

    Iterator和for...of 什么是Iterator ES6中的Map 和 Set ,再加上之前的数组和对象,这样就有了四种数据集合,用户可以组合使用它们,定义自己的数据结构.这时,我们就需要一 ...

  8. nyoj48-小明的调查作业

    48-小明的调查作业 内存限制:64MB时间限制:1000msSpecial Judge: No accepted:3submit:4 题目描述: 小明的老师布置了一份调查作业,小明想在学校中请一些同 ...

  9. HDU 5307 He is Flying (生成函数+FFT)

    题目传送门 题目大意:给你一个长度为$n$的自然数序列$a$,定义一段区间的权值为这一段区间里所有数的和,分别输出权值为$[0,\sum a_{i}]$的区间的长度之和 想到了生成函数的话,这道题并不 ...

  10. Redis-Cluster集群原理

    一.redis-cluster 官方推荐的 redis 集群解决方案,优点在于去中心化, 去中间件,也就是说,集群中的每个节点都是平等的关系,都是对等的,每个节点都保存各自的数据和整个集群的状态.每个 ...