Canvas可用于在网页上绘制图形、动画和交互式内容。
以下是一个简单的Canvas基本用法示例，用于绘制一个红色的矩形：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>Canvas Example</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script src="script.js"></script>
</body>
</html>JavaScript代码（script.js）：
window.onload = function() {
// 获取canvas元素和绘图上下文
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 设置填充颜色为红色
ctx.fillStyle = 'red';
// 绘制一个矩形，起始坐标为(50, 50)，宽为100，高为100
ctx.fillRect(50, 50, 100, 100);
}这个示例首先在HTML页面中创建一个id为"myCanvas"的canvas元素。然后，通过在JavaScript文件中使用document.getElementById()方法获取canvas元素，并使用getContext()方法获取2D绘图上下文。接下来，设置填充颜色为红色，并使用fillRect()方法绘制一个矩形。最后，当页面加载完成后，执行JavaScript代码以完成绘制操作。
width和height：设置或返回Canvas元素的宽度和高度，默认值为300像素和150像素。
getContext()：返回一个绘图上下文对象，用于在Canvas上绘制图形。常用的上下文对象有"2d"和"webgl"。