使用<canvas>元素画一条线
<!DOCTYPE html>
<html>
<body>
<canvas id="Canvas" width="200" height="100">
</canvas>
<script type="text/javascript">
var c = document.getElementById("Canvas");
var line = c.getContext("2d");
line.moveTo(60, 200);
line.lineTo(200, 0);
line.lineTo(50, 50);
line.stroke();
</script>
</body>
</html>
在本文中，将介绍在HTML5中的Canvas元素的帮助下绘制不同形状的方法。
通过<canvas>元素绘制圆圈
- 众所周知，Canvas元素总是与JavaScript一起使用，因为Canvas元素本身没有绘图功能。
- 所以我们必须使用JavaScript代码来绘制圆圈。
让我们举个例子
<!DOCTYPE html>
<html>
<body>
<canvas id="cnv" width="200" height="100">
</canvas>
<script type="text/javascript">
var c = document.getElementById("cnv");
var crcl = c.getContext("2d");
crcl.fillStyle ="#HH0011";
crcl.beginPath();
crcl.arc(70, 25, 20, 0, Math.PI * 2, true);
crcl.closePath();
crcl.fill();
</script>
</body>
</html>
日期：2020-04-11 23:04:06 来源：oir作者：oir