JS+Canvas绘制列表,标题栏
时间: 2023-12-31 12:04:32 浏览: 28
JS+Canvas可以用来绘制各种类型的图形,包括列表和标题栏。下面是一个简单的例子,展示如何使用Canvas绘制一个包含列表和标题栏的图形:
```html
<!DOCTYPE html>
<html>
<head>
<title>Canvas绘制列表和标题栏</title>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 绘制标题栏
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, canvas.width, 50);
ctx.fillStyle = '#fff';
ctx.font = '20px Arial';
ctx.fillText('列表标题', 10, 30);
// 绘制列表项
ctx.fillStyle = '#ccc';
ctx.fillRect(0, 50, canvas.width, 50);
ctx.fillStyle = '#000';
ctx.font = '16px Arial';
ctx.fillText('列表项1', 10, 85);
ctx.fillStyle = '#eee';
ctx.fillRect(0, 100, canvas.width, 50);
ctx.fillText('列表项2', 10, 135);
ctx.fillStyle = '#ccc';
ctx.fillRect(0, 150, canvas.width, 50);
ctx.fillText('列表项3', 10, 185);
</script>
</body>
</html>
```
在这个例子中,我们首先获取了一个Canvas元素,然后使用getContext()方法获取了Canvas的上下文。接着,我们使用上下文来绘制一个标题栏和三个列表项。我们设置标题栏的颜色为深灰色,绘制一个填充矩形,然后在标题栏上绘制了白色的标题文字。接着,我们绘制了三个列表项,每个列表项包含一个浅灰色的填充矩形和黑色的文本。最后我们得到了一个带有标题栏和三个列表项的Canvas图形。