用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>
12
#####二:使用 JavaScript 来绘制图像 canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
var isdown = false,
cover = document.getElementById("cover"),//首先,找到 <canvas> 元素:
covercanvas = cover.getContext("2d");//然后,创建 context 对象:
123
#####三:绘制矩形
//设置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);
12
#####四:移动端阻止浏览器默认功能 由于是长按事件,要在移动端阻止浏览器默认功能。
function isDown(e){
e.preventDefault();
isdown=true;
}
function isUp(e){
isdown=false;
}
..........
12345678
#####五:鼠标事件 需要改变的内容为_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);
}
123456789101112131415161718
#####实际例子(完整代码)
<!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>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度。JavaScript代码可以访问该地区,通过一套完整的绘图功能类似于其他通用二维的API,从而生成动态的图形。
- 通过外部表改进一个繁琐的大查询 (r8笔记第32天)
- 一个简单的bigfile tablespace无法扩展的案例处理 (r8笔记第31天)
- 测试环境的迁移式升级和数据整合(r8笔记第27天)
- 增量数据丢失的原因分析(r8笔记第26天)
- Java全栈开发Spring学习第三天
- 一个oracle bug的简单验证(r8笔记第45天)
- 批量导出csv文件的基本尝试(r8笔记第44天)
- Golang 中的并发限制与超时控制
- 一条简单的报警信息发现的oracle bug(r8笔记第42天)
- 一条insert语句导致的性能问题分析(一)(r8笔记第40天)
- 一条insert语句导致的性能问题分析(二)(r8笔记第43天)
- dataguard中的密码文件管理(r8笔记第39天)
- Mybatis_day02
- Golang构建HTTP服务(一)--- net/http库源码笔记
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 基于Spring Boot + Dubbo的全链路日志追踪(一)
- 使用C语言编写Python扩展包
- PlantUML基本使用(一)--时序图
- gRPC基本使用(一)--java与go之间的相互调用
- confd基本使用--Nginx配置自动化
- JVM自定义类加载器
- Java代理相关:JDK动态代理、CGLIB动态代理
- Tomcat CPU占用100%异常分析与处理
- Solr基本搭建及MySQL配置
- Tomcat, Jre 证书相关
- zookeeper集群搭建
- Maven Jar包制作与上传及基本使用
- 当你在`bind 0.0.0.0`的时候,你实际在做什么
- Hadoop Hive Hbase Kylin 环境搭建
- Spring MVC 学习