阅读 4789

canvas 基础系列(一)之实现抽奖刮刮卡(橡皮擦)

笔主最近一个多月以来 “深入“ 研究了 canvas 的实现原理,一口气读完了 《HTML5 Canvas 核心技术》这本书;而这一切以及这篇文章的诞生,都源于笔主公司的一位实习产品经理~
这位实习生拥有刚毕业时的血气方刚,以及天马行空的想象力;他从未考虑过项目的实际需求,以及上线时间成本,在我们公司以注重产品功能为导向的氛围中,自成一派,成为一股清流 😂
一个推广的小页面,需要有山有水,有天空有流星,手指放上去还得泛起涟漪,拿到需求文档时吓得我赶紧上 GG 搜 demo,这时我发现单个 demo 都能很好的运行在页面中,可是当他们合并以后,在浏览器调试面板中一行行鲜红的文字不停的拍打着我的脸颊。我突然发现自己在遇到一些奇葩需求时,是多么的无助。因为我不会 canvas 啊!
本系列文章旨在与大家分享笔主这段时间学习 canvas 的经验,由浅入深,将自己实际工作过程中抄过的 demo (什么?做个抽奖?评估时间?你等等,我搜下 demo…… 哦,不用评估时间了,已经改好了)都一一实现一遍,让妈妈再也不用担心我们遇到奇葩需求啦!

原文地址 喜欢就给我个大大的 ✨ 吧!

先上预览 demo

scratchCard

我们假设我们的读者都非常熟悉 javascript 原生语法。

本章涉及到的知识点

  • context 绘图环境 我们可以通过 canvas 标签来新建一个 canvas 画布,这个 canvas 画布使得我们可以在浏览器中操作画布内的像素,来实现绘制图形,动画等功能; 想要操作 canvas 画布里的内容,只能使用 javascript,千万别尝试用 css3 的动画属性去操作它,没卵用~

我们想要操作 canvas,首先需要获取这个 canvas 对象

<canvas id="canvas" width="250" height="50"></canvas>
复制代码
    // 获取 canvas 对象
let canvas = document.getElementById('canvas'),  
    // 获取 cavans 绘图环境对象,参数为 2d
	context = canvas.getContext('2d');
复制代码

context 是绘图环境对象,如果你在浏览器中输出 context,你会发现里面包含了许多属性,如:fillStyle strokeStyle等,以及一些函数方法,arc() rect() save() restore() clip()等等。


  • 绘制基本图形

矩形

context.rect($x, $y, $width, $height)

矩形是最简单的图像绘制了;

🔑 参数: xy:分别对应矩形左上角在 canvas 画布中的坐标; widthheight:就是矩形的宽高啦;

⚠️ 不过值得注意的是,调用这个方法,~只是绘制的矩形的路径~,该路径是不可见的,除非你在后面调用 context.fill()context.stroke() 方法,进行填充或者描边。

填充描边的表现形式取决于 context 绘图环境的 fillStylestrokeStyle属性的值。

圆形

context.arc($x, $y, $radius, $start_radian, $end_radian [, $clockwise])

圆形稍微复杂一丢丢,不过也很简单啦。

🔑 参数: xy:代表圆的圆心在 canvas 画布中的坐标点; radius:圆的半径,半径,是半径,不是直径!start_radian $end_radian:起始角和终止角,他们接收的值只能是弧度。

记得圆周率么?记得3.14是啥不,在 javascript 中 Math.PI 就代表的 π ;
简单的说,圆有360°,而一个 π 是180°,你想画个整圆,就是从 0° 到 360° 走一圈,Math.PI * 2;你想画个半圆,就是 0° 到 180°,Math.PI

$clockwise:传入布尔值,false 圆由顺时针绘制;true 圆由逆时针绘制。

和矩形相同,这个方法也只是绘制了一个路径,想要在页面显示,任然是需要调用 context.fill()context.stroke() 两个方法。

当前路径

context.beginPath() 我们在创建一个集合图形之前,都应当先调用该方法,该方法会清除上一次绘制时留下的路径,并将本次绘制的路径作为 ~当前路径~。

绘制矩形和圆

let canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');

/**
 * 绘制一个矩形
 * @param {Num} x      矩形的左上角 x 轴的位置
 * @param {Num} y      矩形的左上角 y 轴的位置
 * @param {Num} width  矩形的宽度
 * @param {Num} height 矩形的高度
 */
function drawRect(x, y, width, height) {
	context.beginPath();               // 清空上一次的路径
	context.rect(x, y, width, height); // 创建一个矩形路径
	context.fill();                    // 将该矩形路径填充为绘图环境指定的填充颜色 context.fillStyle
}

/**
 * 绘制一个圆形
 * @param {Num} centerX  圆心 x 轴坐标
 * @param {Num} centerY  圆心 y 轴坐标
 * @param {Num} radius   圆的半径
 */
function drawCircle(centerX, centerY, radius) {
    context.beginPath();
    context.arc(centerX, centerY, radius, 0, Math.PI * 2, false);
    context.fill();
}

drawRect(0, 0, 100, 100);
drawCircle(160, 50, 50);
复制代码

  • 清除画布内容 context.clearRect($x, $y, $width, $height) 该方法,擦除规定矩形中的所有内容;参数同绘制矩形是一样的,只不过这是清除!

  • canvas 的状态

canvas 的状态包括了:

  1. 当前坐标变换信息,transform 的东西,不用担心,本章并不涉及;
  2. 剪辑区域,这是本章的核心,context.clip() 后面会详细讲到;
  3. 所有绘图环境(context)属性,也就刚刚提到的,fillStyle[规定填充的颜色] strokeStyle[规定描边的颜色],这些状态决定的 canvas 中绘制的图像的展示效果,他们是全局的,也就是说一旦规定了fillStyle为红色,那么除非在 javascript 后面重置这个属性,否则你将来绘制出来的几何图形永远都是红色的。
context.fillStyle = 'red';
drawRect(0, 0, 100, 100);   // -> red
drawRect(110, 0, 100, 100); // -> red

context.fillStyle = 'blue';
drawRect(220, 0, 100, 100); // -> blue
复制代码

  • canvas 的状态保存与恢复 前面已经提到过,canvas 的状态是什么。 而这里引出的是绘图环境中的两个很重要的方法,save() 和 restore()。

如果有个需求,我想要先绘制一个红色的矩形,接着绘制一个蓝色的矩形,最后再绘制一个红色的矩形

我们知道 javascript 是逐条同步执行的,那么要实现上面的需求,我们需要先定义绘图环境的填充颜色为红色,绘制了第一个红色矩形后,再定义绘图环境的填充颜色为蓝色,绘制,再定义绘图环境的填充颜色为红色,就像这样:

context.fillStyle = 'red';
drawRect(0, 0, 100, 100);   // -> red

context.fillStyle = 'blue';
drawRect(110, 0, 100, 100); // -> blue

context.fillStyle = 'red';
drawRect(220, 0, 100, 100); // -> red
复制代码

是不是觉得这样做非常的傻~

此时 save() 和 restore() 就站出来说不了!

context.save():能将执行该方法之前的所有 ~canvas 状态~ 保存下来; context.restore() :将 save 方法保存的 ~canvas 状态~ 释放出来;

所以上面弱智的写法,我们可以写成这样:

context.fillStyle = 'red';
drawRect(0, 0, 100, 100);    // - red 

context.save();

context.fillStyle = 'blue';
drawRect(110, 0, 100, 100);  // -> blue

context.restore();
drawRect(220, 0, 100, 100);  // -> red
复制代码

save 方法保存的是 context.fillStyle = 'red' 这个状态,当设置这个状态为蓝色时,context 绘图环境的 fillStyle 属性变成了蓝色,当执行 restore 方法时,又被恢复成了红色。


  • 剪辑区域 clip()

context 绘图环境对象提供了一个 context.clip() 剪辑区域方法,这也是本章实现橡皮擦功能的核心方法。

该方法会将 ~当前路径~ 作为一个剪辑区域,使该区域以外的图像不可见。

并且在剪辑区域中,所有填充,清除等操作不会影响剪辑区域以外的内容。

所以我们可以创建一个剪辑区域,在这个剪辑区域中执行清除操作,就可以擦除 canvas 画布中指定的内容。

drawRect(0, 0, 100, 100);

context.save();

// 创建一个圆形路径,并作为剪辑区域,擦除该区域中的所有内容
drawCircle(0, 0, 50);
context.clip();
context.clearRect(0, 0, canvas.width, canvas.height);

context.restore();

drawRect(110, 0, 100, 100);
复制代码

开始实现橡皮擦

本章需要用到的基础知识就讲到这里啦,如果大家还有疑问,可以查阅 w3school 上的 canvas 文档

⚠️ 这个 demo 只能运行在手机上,浏览器需要打开手机模拟。

🚶 思路:

  1. 定义一个公用绘制剪辑区域的方法 drawEraser() ,该方法会将当前的路径作为剪辑路径绘制,并::清除该路径内的所有内容::;
  2. 手指按下时,触发 touchstart 事件,开启 dragging 状态,调用 drawEraser() 方法,绘制第一个剪辑区域;
  3. 手指移动过程中,不断的调用 drawEraser() 方法,绘制剪辑区域,实现橡皮擦效果。
<!DOCTYPE html>
<html>

<head>
	<title>橡皮擦</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
</head>

<body>

	<canvas id="canvas" width="300" height="300" style="background: #eee">
		Canvas not supported
	</canvas>

	<script>
		var canvas = document.getElementById('canvas'),
			context = canvas.getContext('2d'),

			ERASER_SIZE = 15,  // 橡皮擦的大小

			dragging = false;  // 是否处在拖动状态

		/**
		 * 转换坐标值
		 * 将鼠标点击或移动时获取的坐标值,减去 canvas 相对窗口的坐标值,就是在 canvas 画布中的坐标值
		 * @param {Obj} e 手指当前相对窗口的坐标位置
		 */
		function windowToCanvas(e) {
			let x = e.targetTouches[0].clientX,
				y = e.targetTouches[0].clientY,
				bbox = canvas.getBoundingClientRect();

			return {
				x: x - bbox.left,
				y: y - bbox.top
			}
		}

		/**
		 * 绘制剪辑区域,并清除该区域中的内容
		 * @param {Obj} loc 手指当前相对 canvas 画布中的坐标位置
		 */
		function drawEraser(loc) {
			context.save();
			context.beginPath();
			context.arc(loc.x, loc.y, ERASER_SIZE, 0, Math.PI * 2, false);
			context.clip();
			context.clearRect(0, 0, canvas.width, canvas.height);
			context.restore();
		}

		/**
		 * 页面加载时,绘制一个铺满 canvas 画布的矩形
		 * 该矩形用于被擦除
		 */
		window.onload = function (e) {
			context.save();
			context.fillStyle = '#666';
			context.beginPath();
			context.fillRect(0, 0, canvas.width, canvas.height);
			context.restore();
		}

		/**
		 * ① 手指按下时,开启 dragging 状态,并绘制剪辑区域
		 */
		canvas.addEventListener('touchstart', function (e) {
			var loc = windowToCanvas(e);
			dragging = true;
			drawEraser(loc);
		})

		/**
		 * ② 手指移动时,不断进行剪辑区域的绘制,以及路径更新,实现擦除的效果
		 */
		canvas.addEventListener('touchmove', function (e) {
			var loc;

			if (dragging) {
				loc = windowToCanvas(e);
				drawEraser(loc);
			}
		})

		/**
		 * ③ 手指离开,结束擦除过程
		 */
		canvas.addEventListener('touchend', function (e) {
			dragging = false;
		})
	</script>
</body>

</html>
复制代码

结语

  • 使用 canvas 实现橡皮擦功能是非常简单的。我们可以把橡皮擦的形状换成矩形,多边形,五角星等等;只需要改变绘制剪辑区域的路径就行了;

  • 刮刮卡的功能,也完全是由橡皮擦功能实现的,我们可以把 canvas 的背景图片设置为开奖的内容,文字等,用一个数组将这些图片的路径包含进去,每次加载页面时,随机调用一个数组元素;

  • 这期内容就讲到这里,下期带大家用 canvas 实现 大转盘抽奖,九宫格抽奖。3Q,阿里呀多。

原文地址 喜欢就给我个大大的 ✨ 吧!

文章分类
前端
文章标签