一、创建一个画布
1、一个画布在网页中一般是一个矩形框,通过canvas元素来绘制(默认情况下<canvas>元素没有边框和内容。)
<canvas id="canvas" width="600px" height="300px"></canvas>
2、使用Js来绘制图像,首先获取dom元素
const canvas = document.getElementById('canvas');
// 此处被渲染的标签必须是canvas标签
const ctx = canvas.getContext('2d');
3、注意canvas是有默认大小的,默认画布大小为300*150,此处我们不能通过css样式去改变他的宽高,我们想要改变他的大小有如下两种方式
1)通过标签自带的属性去改变
<canvas id="canvas" width="600px" height="300px"></canvas>
2)通过js实现
const canvas = document.getElementById('canvas');
canvas.width = "600"
canvas.height = "300"