关于canvas是什么，这里就不再次描述了。这篇主要讲一下我在使用canvas的一个步骤：
1、获取canvas的对象：document.getElementById("canvas")
2、获取canvas的上下文环境：canvas.getContext("2d");
先绘制一条直线：
ctx.moveTo(x1,y1);
ctx.lineTo(x2,x2);
ctx.stroke(); // 连线
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d"); // 获取canvas的上下文环境
ctx.moveTo(100,100);
ctx.lineTo(230,190);
ctx.stroke();
</script>
</body>
</html>
文章评论