开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情
开端
由于小组项目的完成需要Canvas的帮助，于是便开始了Canvas的学习生活。在之前也只听说过Canvas的名字，并不怎么了解其实际用途以及用法，在之后的了解过程中便对它产生了极大的兴趣。因此通过文章的形式输出整理所学到的一些知识，巩固以及查漏补缺✌~~
初识
Canvas是通过JavaScript和HTML的< canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。可以在Web页面上动态绘制图形和图像，通过JavaScript代码实现交互式、高效的图形绘制。
小例子
我们可以通过一个简单的例子来了解Canvas。这个例子是在画布绘制一个绿色的长方形。
< canvas id="canvas">< /canvas>
< script> const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);
< /script>
上述代码在页面中显示如下：
我们先在HTML中创建一个< canvas>元素且id名也为canvas。JavaScript便是获取id以及获取这个元素的Context，然后图像绘制成2D图形。
之后便是将图形渲染成绿色。在左上角（10，10）的地方开始放置，将长方形设置成宽150，高100的长方形。
！！重中之重
- 其中Canvas默认大小为宽300像素，高100像素
- Canvas的大小一般都是通过行内样式来设置的。虽然可以通过CSS来定义大小，但是有时候在绘制出来的图像是扭曲的！！所以还是要通过CSS行内样式来定义。
渲染上下文
渲染上下文（The rendering context）从英文单词就可以看出我们接下来要介绍的便是getContext()方法。
这个方法是用来获得渲染上下文和它的绘画功能。
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
代码的第一行通过使用document . getElementById()方法来为< canvas> 元素得到DOM对象。一旦有了元素对象，你可以通过使用它的getContext()方法来访问绘画上下文了。
填充样式
ctx.fillStyle = 'green';
由上述代码我们可以知道fillStyle属性的作用是设置图形的填充颜色（默认情况下，填充颜色是黑色）。
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";
这些 fillStyle 的值均为 橙色,所以输入符合CSS3颜色值标准的有效字符串都可以表示同一种颜色！
