Canvas基础知识-绘制梯形

图形开发canvashtml5

在HTML的<canvas>元素中绘制梯形，你同样需要使用JavaScript来访问Canvas的绘图上下文，并通过这个上下文的方法来绘制图形。梯形实际上是由两条平行线和两条非平行线组成的四边形，但在Canvas中并没有直接绘制梯形的函数，但你可以通过绘制两条线和一个矩形（或另一个三角形）来模拟梯形。

以下是一个使用HTML文件展示如何在<canvas>上绘制梯形的示例：

示例效果与源代码：

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Canvas 绘制梯形</title>  
</head>  
<body>  
  
<canvas id="myCanvas" width="700" height="300" style="border:1px solid #d3d3d3;">  
    您的浏览器不支持Canvas元素。  
</canvas>  
  
<script>  
    // 获取canvas元素  
    var canvas = document.getElementById('myCanvas');  
    // 获取2D绘图上下文  
    var ctx = canvas.getContext('2d');  
  
    //绘制左侧带边框的梯形
    // 开始新的路径  
    ctx.beginPath();  
    // 将画笔移动到梯形的第一个顶点（左上角）  
    ctx.moveTo(100, 100);  
    // 用直线连接到梯形第二个顶点（右上角）  
    ctx.lineTo(250, 100);  
    // 用直线连接到梯形的第三个顶点（右下角）  
    ctx.lineTo(300, 200);  
    // 用直线直线到梯形的第四个顶点（左下角）  
    ctx.lineTo(50, 200);  
    // 将最后一个点和第一个点的坐标用直线连接起来，形成闭合的折线，  
    ctx.closePath();
    //绘制当前路径 
    ctx.stroke();
    //绘制右侧填充的梯形
    // 开始绘制新的路径  
    ctx.beginPath();  
    // 移动到梯形的第一个顶点（左上角）  
    ctx.moveTo(400, 100);  
    // 绘制直线到梯形的第二个顶点（右上角）  
    ctx.lineTo(550, 100);  
    // 绘制直线到梯形的第三个顶点（右下角）  
    ctx.lineTo(600, 200);  
    // 绘制直线到梯形的第四个顶点（左下角）  
    ctx.lineTo(350, 200);  
    // 闭合路径，回到起始点（可选，因为lineTo已经回到了起始点）  
    ctx.closePath();
    //绘制当前路径
    ctx.stroke();
    //填充色为红色
    ctx.fillStyle = "blue";
    //对路径进行填充
    ctx.fill();
</script>  
  
</body>  
</html>

在这个示例中，我们首先确定了梯形的位置和大小，然后绘制了梯形的顶部和底部水平线，接着绘制了梯形的两侧，最后闭合路径并填充梯形。你可以根据需要调整这些设置来绘制不同大小和位置的梯形。如果你只想要描边效果而不是填充效果，可以去掉填充相关的代码，并设置线条的颜色和宽度。

上一篇：网页中怎么插入背景图片？

下一篇：Canvas怎么绘制三角形？