<!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. ubuntu下安装 nginx + php + memcached + mariadb

    一,apt-get 安装 1,安装nginx sudo apt-get install nginx 所有的配置文件都在/etc/nginx下,虚拟主机配置在/etc/nginx/sites-avail ...

  2. BOW模型在ANN框架下的解释

    原文链接:http://blog.csdn.net/jwh_bupt/article/details/17540561 作者的视野好,赞一个. 哥德尔第一完备性定理,始终是没有能看完完整的证明,艹!看 ...

  3. html IMG 标签水平居中 ,和图片过大 溢出处理

    max-width: 100%;//父元素的宽度 display: block; margin: 0 auto; display: table-cell; 垂直居中 vertical-align: m ...

  4. centos7 rpm 安装 rabbitMQ 最新版

    首先打开官网: http://www.rabbitmq.com/install-rpm.html 先到右侧导航栏来看一下 : 第一个红框是指的在linux中安装,全英文的,乱的一笔,但是静下心来就可以 ...

  5. gradle多模块构建集成swagger

    1.首先说一下软件的版本:springboot:1.5.2:springcloud:D-SR1:swaager2:2.6.0:gradle:4.5.工程模块是分开的单独的entity,api,mapp ...

  6. 通过js 实现 向页面插入js代码并生效,和页面postMessage通讯

       此文章针对已经搭建好jenkins和会使用iconfont图标库而写. 主要目标就是在不通过更改html文件,完成页面交互图标信息,因为美工最多可以上传代码并且自动发布,并不会在Html中加入我 ...

  7. javax.servlet.http.HttpServletRequest; 不存在

    右击项目 找到 最后一项 属性设置 选择 Server Runtime 选择导入你的 tomcat jar 包

  8. mybatis3中几个@Provider的使用方式

    Mybatis的原身是ibatis,现在已经脱离了apache基金会,新官网是http://www.mybatis.org/.Mybatis3中增加了使用注解来配置Mapper的新特性,这里主要介绍@ ...

  9. JAVAEE网上商城项目总结

    发送邮件实现(使用QQ邮箱发送到指定邮箱) 需要的jar 邮件发送类代码: package util; import java.util.Properties; import javax.mail.A ...

  10. centos安装wget 及配置

    yum -y install wget #yum -y install setup 本文 #yum install perl Searching for GCC... The path "& ...