这段代码是一个简单的HTML5 Canvas动画示例,它使用JavaScript来绘制一个旋转的矩形。要在Visual Studio Code (VSCode) 中运行这段代码,你需要遵循以下步骤:
1. 创建HTML文件:首先,你需要创建一个HTML文件来包含这段JavaScript代码。你可以将这段代码放在script标签中。
2. 设置Canvas元素:在HTML文件中,添加一个<canvas>元素,这样JavaScript代码才能找到并操作它。
3. 运行本地服务器:由于VSCode本身不提供浏览器环境,你需要通过本地服务器来运行HTML文件。你可以使用内置的Live Server扩展,或者使用其他方法来启动本地服务器。
步骤1: 创建HTML文件
创建一个名为index.html的文件,并添加以下内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Animation</title>
</head>
<body>
<canvas id="myCanvas" width="1000" height="1000"></canvas>
<script>
// 将你的JavaScript代码粘贴在这里
</script>
</body>
</html>
步骤2: 粘贴JavaScript代码
将你提供的JavaScript代码粘贴到
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const {width, height} = canvas;
ctx.fillStyle = 'red';
function draw(rotation = 0) {
ctx.clearRect(0, 0, 1000, 1000);
ctx.save();
ctx.translate(width / 2, height / 2);
ctx.rotate(rotation);
ctx.translate(-width / 2, -height / 2);
ctx.beginPath();
ctx.rect(200, 200, 200, 200);
ctx.fill();
ctx.restore();
}
function update(t) {
draw(t / 500);
requestAnimationFrame(update);
}
update(0);
步骤3: 安装Live Server扩展
在VSCode中,打开扩展视图(点击左侧的扩展图标或使用快捷键Ctrl+Shift+X),搜索并安装Live Server扩展。
步骤4: 运行本地服务器
打开index.html文件。
点击VSCode右下角的“Go Live”按钮(一个绿色的播放按钮),或者右键点击文件并选择“Open with Live Server”。
步骤5: 查看结果
浏览器将打开一个新的标签页,显示你的Canvas动画