- A+
所属分类：整站
如何使用js在网页上绘制圆弧或者直线？
直接上一一段代码把，可以在本站js测试页面测试。下面代码绘制一个圆弧圆，一段直线。
<!DOCTYPE html>
<html>
<head>
<title>绘图程序</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var isDrawing = false;
var lastX, lastY;
// 绘制圆弧
function drawArc(x, y, radius, startAngle, endAngle, anticlockwise) {
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
ctx.stroke();
}
// 绘制直线
function drawLine(x1, y1, x2, y2) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
// 示例：绘制一个圆和一条直线
drawArc(250, 200, 200, 0, Math.PI * 2);
drawLine(100, 100, 400, 400);
</script>
</body>
</html>
复制
