<!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. 写给VC++ Windows开发的初学者 一片不错的博文

    不知不觉2010年都过了半年了,想来我学C语言已经12个年头了(从1998年开始),用VC++也有11年了,最早使用Turbo C2.0 ,也学过汇编,后来使用Borland C++3.0 .Micr ...

  2. adb使用实践

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

  3. HTTP报文获取方法

    GET:获取资源,可以理解为读取或者下载数据: HEAD:获取资源的元信息: POST:向资源提交数据,相当于写入或上传数据: PUT:类似 POST: DELETE:删除资源: CONNECT:建立 ...

  4. VMware ESXi定制版(OEM ISO)资源下载（包含5.1\5.5\6.0）

     一.VMware ESXi 5.1.0 update03 1.VMware-ESXi-5.1.0-Update3-2323236-hitachi-0400.iso(日立) 2.VMware-ESXi ...

  5. HTML5新特性之文件和二进制数据的操作 Blob对象

    HTML5新特性之文件和二进制数据的操作 1.Blob对象 2.FileList对象 3.File对象 4.FileReader 对象 5.URL对象

  6. css超出不换行可滑动

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

  7. nginx强制使用https访问（多站点多域名配置）

    很多配置过https模板的人都知道,配置https 时 ,站在用户的角度http 和https 的区别根本不清楚.有时候敲 http 时会出现 404 错误,而实际上我们是https. 有朋友找我配置 ...

  8. js常用正则表达式大全--如：数字，字符等

    一.校验数字的表达式 1 数字:^[0-9]*$ 2 n位的数字:^\d{n}$ 3 至少n位的数字:^\d{n,}$ 4 m-n位的数字:^\d{m,n}$ 5 零和非零开头的数字:^(0|[1-9 ...

  9. js和java中URI的编码和解码

    js中对文字进行编码主要有三个函数:escape,encodeURI,encodeURIComponent: 对应解码为:unescape,decodeURI,decodeURIComponent 这 ...

  10. Python笔记8----DataFrame（二维）

    目录: DataFrame概念 DataFrame创建 基本操作 查看.索引 修改.删除 统计功能 条件筛选 合并 去除空值 4. 一些常用的函数 apply memory_usage pivot_t ...