canvas
读：康窝丝
意思：画布
HTML canvas是什么
<canvas>是一个H5标签
<canvas>必须添加 id
<canvas>默认尺寸：300*150
修改<canvas>尺寸可以使用HTML属性或CSS属性
<style>
body{
background-color: aqua;
}
#can{
background-color: azure;
/* CSS属性 */
width: 900px;
height: 500px;
}
</style>
</head>
<body>
<!--HTML属性-->
<canvas id="can" width="600" height="300" ></canvas>
</body>
<canvas>标签不接受任何内容
<canvas>的用途：
- 可以绘制图形（直线、矩形、多边形、圆形）
- 绘制文本
- 可以制作动画
- 绘制交互
- 制作游戏
绘图方法
- canvas.getContext('2d')：引入绘图环境
- ctx.stroke()：创建线段（添加描边）
- ctx.beginPath()：重新开启新路径（意思：断开上一条路径）
- ctx.moveTo(X,Y)：设置直线起点坐标
- ctx.lineTo(X,Y)：设置直线终点坐标
- ctx.arc(水平中心点,垂直中心点,弧线半径,起始角度,结束角度,顺时针(false)或逆时针(true)) ：默认逆时针：绘制弧线
1.绘制直线步骤
const ctx = canvas.getContext('2D')// 引⼊绘图环境
Ctx.beginPath() // 开启新路径
ctx.moveTo() //设置直线段起点坐标
ctx.lineTo() //设置直线段终点坐标
ctx.stroke() // 创建路径
2.绘制弧线步骤
const ctx = canvas.getContext('2D')// 引⼊绘图环境
Ctx.beginPath() // 开启新路径
ctx.ar(x,y,弧线半径,起始⻆度,结束⻆度,逆时针) 绘制弧线端
ctx.stroke() // 创建路径
问题
1.h5的canvas是什么？
- 它是一个标签
- 它是一个绘图的标签
- 只能使用js绘图（画笔：js）
- 它不接受内容
- 它是矩形的
