用Canvas画一个刮刮乐
Canvas 通过 JavaScript 来绘制 2D图形。Canvas 是逐像素进行渲染的。开发者可以通过javascript脚本实现任意绘图。Canvas元素是HTML5的一部分，允许脚本语言动态渲染位图像。canvas是HTML5中的新元素，使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。
在国外问答网站Quora上，许多开发者对于HTML5 Canvas元素的实用性进行了一系列探讨。Canvas非常灵活，能够很好地融合JavaScript代码并在浏览器内绘制华丽的图形。
学习网址和资料：
菜鸟教程：http://www.runoob.com/html/html5-canvas.html
http://www.w3school.com.cn/tags/tag_canvas.asp
用Canvas画一个刮刮乐步骤：
一：创建一个画布（Canvas）
注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.
<canvas>简单实例如下:
<canvas id="myCanvas" width="200" height="100"></canvas>
二：使用 JavaScript 来绘制图像
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
var isdown = false,
cover = document.getElementById("cover"),//首先，找到 <canvas> 元素:
covercanvas = cover.getContext("2d");//然后，创建 context 对象：
三：绘制矩形
//设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
//canvas 是一个二维网格。canvas 的左上角坐标为 (0,0)，上面的 fillRect 方法拥有参数 (0,0,400,200)。意思是：在画布上绘制 400x200 的矩形，从左上角开始 (0,0)。
covercanvas.fillStyle="transparent";
covercanvas.fillRect(0,0,400,200);
四：移动端阻止浏览器默认功能
由于是长按事件，要在移动端阻止浏览器默认功能。
function isDown(e){
e.preventDefault();
isdown=true;
}
function isUp(e){
isdown=false;
}
..........
五：鼠标事件
需要改变的内容为_width，_height,touchTop,touchLeft这几个参数，根据自身画布的位置自行计算即可。
function draw(e) {
e.preventDefault();
if(isdown) {
if(e.changedTouches) {
e = e.changedTouches[e.changedTouches.length - 1];
}
var _height = parseInt((window.innerHeight - 400) / 2),
_width = parseInt((window.innerWidth - 400) / 2),
touchTop = e.clientY - _height,
touchLeft = e.clientX - _width;
with(covercanvas) {
beginPath();
arc(touchLeft, touchTop, 10, 0, Math.PI * 2);
fill();
}
}
//alert(touchTop);
}
实际例子（完整代码）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用Canvas画一个刮刮乐</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<style>
.content,
.cover {
width: 400px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin: -200px 0 0 -200px;
}
.content {
font-size: 48px;
line-height: 200px;
text-align: center;
color: red;
}
h3 {
text-align: center;
line-height: 200px;
color: deepskyblue;
}
</style>
</head>
<body>
<h3>刮刮乐</h3>
<div class="content">蚂蚁会员vip</div>
<!-- 创建一个画布（Canvas）-->
<canvas id="cover" class="cover" width="400" height="400"></canvas>
</body>
<script>
/*使用 JavaScript 来绘制图像*/
var isdown = false,
cover = document.getElementById("cover"), //首先，找到 <canvas> 元素:
covercanvas = cover.getContext("2d"); //然后，创建 context 对象：
//下面的两行代码绘制一个灰色的矩形：
//设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
covercanvas.fillStyle = "transparent";
covercanvas.fillRect(0, 0, 400, 200);
//canvas 是一个二维网格。
//canvas 的左上角坐标为 (0,0)
//上面的 fillRect 方法拥有参数 (0,0,400,200)。
//意思是：在画布上绘制 400x200 的矩形，从左上角开始 (0,0)。
function fillter(canvas) {
canvas.fillStyle = "#ccc";
canvas.fillRect(0, 0, 400, 200);
}
function isDown(e) {
e.preventDefault();
isdown = true;
}
function isUp(e) {
isdown = false;
}
function draw(e) {
e.preventDefault();
if(isdown) {
if(e.changedTouches) {
e = e.changedTouches[e.changedTouches.length - 1];
}
var _height = parseInt((window.innerHeight - 400) / 2),
_width = parseInt((window.innerWidth - 400) / 2),
touchTop = e.clientY - _height,
touchLeft = e.clientX - _width;
with(covercanvas) {
beginPath();
arc(touchLeft, touchTop, 10, 0, Math.PI * 2);
fill();
}
}
}
fillter(covercanvas);
covercanvas.globalCompositeOperation = 'destination-out';
cover.addEventListener('touchstart', isDown);
cover.addEventListener('touchmove', draw);
cover.addEventListener('touchend', isUp);
cover.addEventListener('mousemove', draw);
cover.addEventListener('mousedown', isDown);
cover.addEventListener('mouseup', isUp);
</script>
</html>
Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度。JavaScript代码可以访问该地区，通过一套完整的绘图功能类似于其他通用二维的API，从而生成动态的图形。
原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
有个很难涨粉的的公众号叫：【编程微刊】
用Canvas画一个刮刮乐的更多相关文章
- 深夜，用canvas画一个时钟
深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
- 10分钟，利用canvas画一个小的loading界面
首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...
- 使用H5 canvas画一个坦克
具体步骤如下: 1. 首先做出绘图区,作为坦克的战场 <canvas id="floor" width="800px" height=&quo ...
- 用canvas画一个的小画板（PC端移动端都能用）
前言 本篇的内容主要包括: canvas标签简介 画板的功能简介 画板的JS部分(包括:1.获取画布 2.使画板全屏幕显示且自适应 3.如何绘制直线 4.绘画时的三种状态(鼠标点击.移动.离开)5.画 ...
- 利用canvas画一个实时时钟
先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- 手对手的教你用canvas画一个简单的海报
啦啦啦,首先说下需求,产品想让用户在我们app内,分享一张图片到微信.qq等平台.图片中包含用户的姓名.头像.和带着自己信息的二维码.然后,如何生成这张海报呢~~~首先我们老大告诉我有一个插件叫htm ...
- 玩转html5（四）----使用canvas画一个时钟（可以动的哦！）
先给个效果图,我画的比较丑,大家可以自己美化一下, 直接上代码: <!DOCTYPE html> <meta charset="utf-8"> <ht ...
- canvas画一个时钟
效果图如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 使用canvas画一个雷达效果图的特效代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- 编程之路-client学习知识点纲要（Web/iOS/Android/WP）
Advanced:高级内容 Architect:架构设计 Core:框架底层原理分析 Language:框架经常使用语言 Objective-C Dart Swift Java Network:网络 ...
- angular6添加material-svgIcon
1. app/assets/util/util.svg.ts 统一管理svg字体库,避免各个模块分散加载.所以使用公共文件统一处理 再到core.module.ts中引入.在core模块下的所有组价都 ...
- loadrunner--log的使用总结
1.log的设置方式.在 runtime setting中可以设置log的生成方式:默认的log方式:Enable logging选中,log option是Send messages only wh ...
- 低成本开始互联网创业：探讨域名、服务器、CDN、邮箱等节流之道
互联网创业一直是个热门话题,对这个问题我也有不断的思考. 今天,探讨下如何低成本开始互联网创业. 背景 愿意冒险去创业的同志,大多是"屌丝"而非"高富帅",大多 ...
- ViewPage第二课为ViewPage加入标题
在第一课 学前准备:掌握ViewPage第一课http://blog.csdn.net/wei_chong_chong/article/details/50468832 为ViewPage加入标题: ...
- python的sorted() 函数
摘自:http://www.runoob.com/python/python-func-sorted.html sortedClassCount=sorted(classCount.items(),k ...
- POJ 1270 Following Orders 拓扑排序
http://poj.org/problem?id=1270 题目大意: 给你一串序列,然后再给你他们部分的大小,要求你输出他们从小到大的所有排列. 如a b f g 然后 a<b ,b< ...
- UVA 11624 - Fire! 图BFS
看题传送门 昨天晚上UVA上不去今天晚上才上得去,这是在维护么? 然后去看了JAVA,感觉还不错昂~ 晚上上去UVA后经常连接失败作死啊. 第一次做图的题~ 基本是照着抄的T T 不过搞懂了图的BFS ...
- linux下U盘状态检测
Linux的文件系统是异步的,也就是说写一个文件不是立刻保存到介质(硬盘,U盘等)中,而是存到缓冲区内,等积累到一定程度再一起保存到介质中.如果没有umount就非法拔出U盘,程序是不知道的,fope ...
- VS提示SurfFeatureDetector不是cv的成员函数 .
原因:没有把 opencv_nonfree243d.lib 加入lib库中. 还有两个头文件:#include <opencv2/nonfree/features2d.hpp>#inclu ...