用Canvas画一个刮刮乐

短命女 2022-12-09 01:56 161阅读 0赞

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][.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这几个参数，根据自身画布的位置自行计算即可。

\#\#\#\#\#实际例子（完整代码）

<!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 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_e8197d4d9880]  
福利二：微信小程序入门与实战全套详细视频教程

![image][]

重磅！前端迷 交流群已成立

在前端学习的这条道路上，我么总是会遇到这样或者那样的问题，如果自己蒙头解决或许要花很多时间，如果这个时候你的身边有很多前端大佬，有很多前端小伙伴聚集的地方，就可能遇到过同样的问题，给出解决方案，这样就简单方便多了，困扰自己的问题也能够很快解决，头发也能少掉几根。

为了让你每天学会一个技术，少掉两根头发，多认识一个女生，黔在在创建了一个「前端迷 交流群」，更好的跟大家一起学习交流，大家一起进步，一起成为更好的自己。

有兴趣入群的同学，可长按扫描下方二维码，或添加微信号「xiao\_mi\_mei6」

一定要备注：城市+昵称+技术方向，根据格式备注，可更快被通过且邀请进群

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]

[Canvas]: http://zh.wikipedia.org/wiki/Canvas_%28HTML%E5%85%83%E7%B4%A0%29
[.png]: /images/20221123/b7d55036851d4a22956b4957059c4e08.png
[https_www.jianshu.com_p_e8197d4d9880]: https://www.jianshu.com/p/e8197d4d9880
[image]: /images/20221123/ea6c7f60c1ac4cf1bbbf5cd5ecc78f5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/b5173195ce7c4860b10488ed23023bb7.png