canvas萌新

canvas学习基础

前前前前言

刚开始学canvas时，会有一点不习惯 还没有把那些编程思想的各种代码语言给忘掉，所以在学习canvas时建议各位，先把那些所谓的代码思想统统扔到垃圾桶，清净一会。然后我们开始理解canvas时怎么回事。

简述：

首先canvas是做2d的，可以做伪类3d效果。所以我把canvas作为一张画布，平铺在页面上，然后他们定义了一些不同的画笔🖌️，有些是用来画圆的 、有些是用来画矩形、有些是用来画线条的、也有些可以化成曲线，以下所记录的一些方法就是这些画笔。

标签：创建画布

• ⚠️需在行间内定义宽和高（style中定义的宽高为定比例缩放而不是真正的画布宽高）

<canvas id="drawing" width="500" height="400">
  <span style="color:white;">这里浏览器不支持canvas</span>   <!-- 浏览器不支持canvas则显示这里内容 -->
</canvas> <!-- canvas 默认宽300 高150 -->

绘制环境

1. getContext('2d')目前只支持2d场景。 （继续学习可webgl做3d场景）

绘制方块

2.fillRect(left, top,width,height);默认颜色是黑色。 ——fill:填充 Rect:方块
3. strokeRect(left, top,width,height);带边框的方块 ——stroke:边线
- 默认1px黑色边框

设置绘图

4. fillStyle:填充颜色（绘制canvas是有顺序的）