01canvas概述

canvas 可以进行绘制复杂图形，做动画，处理图像，开发游戏，处理视频等操作。

canvas在html中引用

/**
宽高不能在css中设置，可以在style中或者js控制宽高
**/
<canvas style="width:400;height:400" id="myCanvas"></canvas>

canvas在js中获取上下文对象

const canvas= document.getElementById('canvas');//相当于获取了画布

const ctx=canvas.getContext('2d')//相当获取了画笔

使用ctx上下文对象进行基础绘图

<script>
        //获取画布
        const canvas = document.querySelector('#canvas');
        //画笔
        const ctx=canvas.getContext('2d');
        //颜色 红色
        ctx.fillStyle='blue';
        //形状 矩形
        ctx.fillRect(50,50,200,200);
</script>

总结：

1.建立canvas 画布。
2.通过canvas 画布获取上下文对象，也就是画笔。
3.设置画笔颜色。
4.设置图形形状。
5.绘制图形