canvas 系列学习笔记一《基础》
Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。 Canvas 对象表示一个 HTML 画布元素 -。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。 — 百度百科
canvas 对于前端的意义
前端日常图形借助div 等标签组装 + css 样式就满足日常工作需要，对于动画css 和 一些第三方js 库 提供的案例也可以完成。那么为什么要学canvas ？
我的需求：
- 更底层和更自由的界面绘制
- 更灵活的动画
- 想了解更多的图形学知识
除了canvas， svg 也是必修课，学完比较优略势。
学习方法
学习编程，多写多练用不过时，多以实战的方式来学习每一块知识点，然后博客记录总结。
canvas 标签
canvas 是一个html 标签，有宽高属性，如果不设置会默认宽度为300像素和高度为150像素。
<canvas id="canvas" class="canvas" width="200" height="200"></canvas>canvas 设置css 宽高
和其他标签一样canvas 标签可以修改css 调整样式，canvas 默认 inline-block布局，如果要自动居中，要display: block;。
例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" class="canvas" width="100" height="100"></canvas>
<div id="div" class="div"></div>
</body>
<style>
.canvas{
display: block;
background: red;
width: 300px;
height: 400px;
}
</style>
</html>默认设置了100 * 100 的宽高，通过css 改成 300 * 400 成功了。
canvas css 重写样式画比例扭曲
如果写了canvas 宽高，同时修改了css 宽高，虽然样式变化为css 样式，但是会发现有再画元素的时候视觉上会被css 宽高比例拉伸比例，看下面例子，我们再上面例子上画一个正方形。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" class="canvas" width="100" height="100"></canvas>
<div id="div" class="div"></div>
</body>
<style>
.canvas{
display: block;
background: red;
width: 300px;
height: 400px;
}
</style>
<script>
let canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d');
ctx.fillRect(25, 25, 50, 50);
</script>
</html>结果：
化成了长方形，确实没有按照已有比例修改，具体什么原因还不明确，没有找到官方解释和原理，待评论区大神指教。
canvas 大小动态修改
canvas 不能设置百分或者rem ，css 设置宽高也有问题，那么我怎么动态修改大小呢？
可以取到canvas dom 实例去修改属性。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" class="canvas" width="100" height="100"></canvas>
<div id="div" class="div"></div>
</body>
<style>
.canvas{
display: block;
background: red;
/* width: 300px;
height: 400px; */
}
</style>
<script>
let canvas = document.getElementById('canvas')
canvas.width = 300
var ctx = canvas.getContext('2d');
ctx.fillRect(25, 25, 50, 50);
</script>
</html>显示结果：
canvas 渲染上下文
元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。我们将会将注意力放在2D渲染上下文中。其他种类的上下文也许提供了不同种类的渲染方式；比如， WebGL 使用了基于OpenGL ES的3D上下文 (“experimental-webgl”) 。
canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。 元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()接受一个参数，即上下文的类型。对于2D图像而言，如本教程，你可以使用 CanvasRenderingContext2D。
let canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d');
ctx.fillRect(25, 25, 50, 50);canvas 锚点
栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。所以图中蓝色方形左上角的坐标为距离左边（X轴）x像素，距离上边（Y轴）y像素（坐标为（x,y））。
腾讯云开发者
