Canvas刮刮乐

最新推荐文章于 2023-10-25 09:37:21 发布

编程微刊

最新推荐文章于 2023-10-25 09:37:21 发布

阅读量211

点赞数

本文链接：https://blog.csdn.net/qq_38822390/article/details/90269947

版权

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

图片.png
###用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，从而生成动态的图形。

文末福利：

福利一：前端，Java，产品经理，微信小程序，Python等资源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入门与实战全套详细视频教程

自荐前端干货：

进阶攻略|前端最全的框架总结：https://www.jianshu.com/p/2a8ce7075d79
web开发快速提高工作效率的一些资源：https://www.jianshu.com/p/3cede64e87e5
前端学习的几个网站：https://www.jianshu.com/p/c36463dd56db
老司机程序员用到的各种网站整理：https://www.jianshu.com/p/c806eabe5bec
进阶攻略|前端完整的学习路线：https://www.jianshu.com/p/ed50ee3889d4
八款前端开发人员更轻松的实用在线工具：https://www.jianshu.com/p/267a01fb8bdb
前端几个常用简单的开发手册拿走不谢：https://www.jianshu.com/p/fd9689046a9b
程序员常用的六大技术博客类：https://www.jianshu.com/p/d1614f890282
九款优秀的企业项目协作工具推荐：https://www.jianshu.com/p/7df25e438610
移动端手势的七个事件库：https://www.jianshu.com/p/0754d5daa27e
Bootstrap相关优质项目学习清单：https://www.jianshu.com/p/80d229e7fedc
2018前端越来越流行的的技术：https://www.jianshu.com/p/d4af2aa96cee

原文作者：祈澈姑娘
关注「编程微刊」公众号，在微信后台回复「领取资源」，获取IT资源200G干货大全。

编程微刊

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Canvas刮刮乐

Canvas 通过 JavaScript 来绘制 2D图形。Canvas 是逐像素进行渲染的。开发者可以通过javascript脚本实现任意绘图。Canvas元素是HTML5的一部分，允许脚本语言动态渲染位图像。canvas是HTML5中的新元素，使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。在国外问答网站Quora上，许多开发者对于HTML5 Canvas元素的实用性进...
复制链接

扫一扫