01. canvas的创建
于2022-12-29 17:12:55发布
36
创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas width="500" height="500" style="background:#000;"></canvas>
</body>
</html>
获取CanvasRenderingContext2D对象
要在canvas上面绘制内容,则首先需要获取CanvasRenderingContext2D对象。该对象实现了canvas的大多数方法,可以理解该对象是一支画笔,有了画笔才能进行绘图等操作。
获取画笔
const paint = document.querySelector('canvas').getContext('2d');