❤canvas篇
1、canvas认识
canvas（画布）是什么，首先我们知道的是<canvas>是HTML5新增的元素，用于通过JavaScript绘制图形的元素。
允许开发者使用JavaScript（但是不仅限制于js）中的脚本来绘制图像，在页面上绘制图形、动画、游戏等多媒体元素，而无需依赖插件（如Flash）。
Canvas本身是一个矩形区域，可以通过HTML <canvas> 元素在页面中定义，然后通过JavaScript来控制其绘图内容。
<canvas>最早由Apple引入Webkit,使用<canvas>标签时，建议要成对出现，不要使用自闭合形式。
2、主要特点和用途包括：
canvas凭借强大的绘图API和灵活性，成为了Web开发中创建动态和交互式图形内容的重要工具之一 。
如果说画笔是美术师手中最好的工具，那么canvas就是前端画家手中的画笔。
- 绘图功能：Canvas最主要的功能就是绘图，它为我们提供了绘制路径、填充颜色、渐变、图像、文本等的API，可以用于创建各种复杂的图形和动画效果。
- 动态图形：Canvas是基于脚本控制的，因此能够实现各种动态、交互式的图形和动画，比如实时更新的数据可视化、动态图表等。
- 游戏开发：Canvas在游戏开发中有广泛的应用，通过绘制图形和实现交互逻辑，可以创建简单到复杂的2D游戏。
- 图形编辑：用于图像处理和编辑，如绘制工具、简单的图像滤镜等。
- 跨平台支持：Canvas基于HTML5标准的，因此能够在支持HTML5的各种现代浏览器中运行，而不受特定操作系统或设备的限制。
日常使用
3、简单使用：
接下来我们就写一个简单的Canvas示例，在页面上绘制一个简单的矩形：
思路：
写一个canvas元素，然背后定义宽高
获取元素，绘制红色矩形
js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Example</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
// 获取Canvas元素
var canvas = document.getElementById('myCanvas');
// 获取绘图上下文
var ctx = canvas.getContext('2d');
// 绘制一个红色矩形
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 150, 80);
</script>
</body>
</html>然后我们看看最后的效果
4、canvas的基本用法
- canvas的默认宽高（canvas默认属性）
我们没有设置canvas的宽度和高度属性的时候，canvas会给我们一个默认宽高
默认width：300px；默认height：150px；
- canvas的默认背景颜色
没有设置canvas的默认背景颜色时候，canvas继承body的背景颜色。
- canvas画布的内容位置
canvas画布的内容在canvas标签的上面，而不是在两个标签里面。
- 支持和不支持显示
不支持canvas的浏览器会显示canvas标签里面的内容 支持canvas的浏览器不会显示标签里面的内容
也就是说如果我们在不兼容canvas的浏览器之中要写一个提示应该写成下面这样子
js
<canvas id="test">
<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
</canvas>- canvas标签的两个属性
canvas跟img标签很像有width和height两个属性。 设置width和height不要通过css来设置，而是在canvas标签里面进行设置
js
<canvas id="test" width="300" height="300">
<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
</canvas>- canvas的渲染上下文：getContext()方法
<canvas>元素只是创造了一个固定大小的画布，要想在它上面去绘制内容，我们需要找到他的渲染上下文；
getContext() <canvas>元素有一个getContext()的方法，这个方法是用来获得渲染上下文和它的绘画功能。
getContext()只有一个参数，上下文的格式 获取方式：
js
var canvas = document.getElementById('box');
var ctx = canvas.getContext('2d');检查支持性：（思路就是通过支撑性直接去看是否有canvas.getContext这个属性）
js
var canvas = document.getElementById('box');
if(canvas.getContext){
var ctx = canvas.getContext('2d');
}判断浏览器是否支持canvas
完整使用 ：检测浏览器对于canvas的支撑性
设置canvas宽高，并获取canvas对象，判断是否支持canvas
bash
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<canvas id="canvas" height="400" width="400" style="border:1px solid #ccc"></canvas>
<script>
const canvas = document.getElementById('canvas');
if(canvas.getContext){
console.log('支持');
}else{
console.log('不支持');
alert('不支持canvas');
}
</script>
</body>
</html>实际效果 我们打开以后发现什么都没有，别着急，这是因为我们基本所有浏览器都开始支持canvas画布，但是有一些是不支持的，比如预览
这里我们通过预览的方式查看，就可以看到我们写的兼容文本。
5、canvas实战使用
接下来我们就开始写一些小案例，然后尝试对于canvas的使用
(1) canvas绘制从上至下的渐变圆
接下来我们就完善一下上面我们之前绘制的矩形，把他改造成一个渐变圆
使用 <canvas id="canvas"></canvas> 结构
js
<canvas id="myCanvas" width="600" height="400"><span>您的浏览器不支持画布元素 请您换成的谷歌</span></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); //返回一个canvas渲染的上下文，如果不支持返回null
ctx.beginPath(); // 开一条新路
var grd = ctx.createLinearGradient(0, 0, 0, 170); // (x,y,x1,y1) - 创建线条渐变
grd.addColorStop("0", "pink");
grd.addColorStop("0.5", "white");
grd.addColorStop(1, "pink");
ctx.fillStyle = grd;
ctx.arc(200, 200, 100, 0, Math.PI * 2);
ctx.fill(); // 画圆
ctx.closePath();
</script>然后我们看看效果，简单的几下就好像月上眉梢一样，是不是很好看。
(2) canvas绘制验证码
接下来我们用canvas绘制一个验证码，来熟悉canvas的特性和功能
先来分析一下验证码思路：
-
通过RGB值判断颜色深浅
-
把 RGB 的值求和，然后取一个值，当和大于等于此值就为浅色
-
和越小，颜色越深
过程之中发现的问题：
- 效果不理想，特别是在 B 较大的时候，估计是眼睛对 RGB 各种颜色的敏感度都不一样
解决方式
通过把 RGB 模式转换成 YUV 模式，而 Y 是明亮度（灰阶），因此只需要获得 Y 的值而判断他是否足够亮就可以了
bash
const g = $R * 0.299 + $G * 0.587 + $B * 0.114;
if (g >= 192) {
// add shadow
// 浅色模式
}g越小，颜色越深，可以按照你自己的需要定一个阀值
这部分内容写成了写一个自己的npm组件从0到发布一文，需要的小伙伴可以查看。