参考 b站 叩丁狼 Canvas 课程
（1）通过 html 标签创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通过html标签创建</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
// 1. 获取 canvas 画布
const canvas = document.getElementById('canvas')
// 2. 获取 context 对象（画笔）
const context = canvas.getContext('2d')
// 3. 画一个正方形
// fillRect(x, y, width, height)
context.fillRect(50, 40, 200, 200)
</script>
</body>
</html>（2）通过 js 创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通过js创建</title>
</head>
<body>
<script>
// 1. 创建 canvas 画布
const canvas = document.createElement('canvas')
// 设置宽高
canvas.width = 500
canvas.height = 500
document.body.append(canvas)
// 2. 获取 context 对象（画笔）
const context = canvas.getContext('2d')
// 3. （同第一节）画一个正方形
context.fillRect(60, 60, 200, 200)
</script>
</body>
</html>（3）canvas 宽高的设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas宽高的设置</title>
<!-- <style>
canvas {
width: 500px;
height: 500px
}
</style> -->
</head>
<body>
<script>
// 注意：不建议使用 CSS 样式表设置 canvas 的宽高，样式会出问题
// 1. 创建 canvas 画布
const canvas = document.createElement('canvas')
// 设置宽高
canvas.width = 500
canvas.height = 500
document.body.append(canvas)
// 2. 获取 context 对象（画笔）
const context = canvas.getContext('2d')
// 3. （同第一节）画一个正方形
context.fillRect(60, 60, 200, 200)
</script>
</body>
</html>
评论 (0)