canvas 双直线代码
时间: 2023-10-07 10:04:17 浏览: 155
以下是HTML5 Canvas中绘制双直线的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Canvas 双直线</title>
<style type="text/css">
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script type="text/javascript">
// 获取 Canvas 对象
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 绘制第一条直线
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.strokeStyle = "red";
ctx.stroke();
// 绘制第二条直线
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.strokeStyle = "blue";
ctx.stroke();
</script>
</body>
</html>
```
在此示例中,我们首先获取Canvas对象,然后使用`beginPath()`方法开始绘制第一条直线。我们使用`moveTo()`方法将绘图游标移动到起始点,然后使用`lineTo()`方法绘制直线到结束点。我们还设置了直线的颜色为红色,并使用`stroke()`方法将直线绘制到Canvas上。
接下来,我们使用相同的方法绘制第二条直线,但这次我们使用不同的颜色(蓝色)。
请注意,在绘制直线之前,我们必须使用`beginPath()`方法重置Canvas上的路径。如果省略此步骤,则会在Canvas上绘制两条相连的线段而不是两条独立的直线。