html5&css&js代码 026 canvas示例
- 一、代码
- 二、解释
这段HTML代码定义了一个页面，其中包含一个容器和一个canvas元素。通过JavaScript代码，使用canvas绘制了一个矩形、一个填充了颜色的矩形、一个文本以及一个圆形。
一、代码
<!DOCTYPE html>
<html lang="zh-cn">
<head><title>编程笔记 html5&css&js HTML Canvas</title><meta charset="utf-8"/><style>body {display: block;color: cyan;background-color: teal;}.container {width: 900px; /* 设置容器的宽度 */margin: 0 auto; /* 将左右边距设置为自动 */line-height: 2;}h1 {text-align: center;
margin-top: 100px;}</style>
</head>
<body>
<div class="container"><h1>这是一个canvas示例</h1><canvas id="myCanvas" width="900" height="900" style="border: 1px solid #000000"></canvas>
</div>
<script>const canvas = document.getElementById("myCanvas");const ctx = canvas.getContext("2d");ctx.beginPath();ctx.rect(200, 200, 500, 500);ctx.stroke();ctx.fillStyle = "#00FF00";ctx.fillRect(300, 300, 300, 300);ctx.font="50px Arial";ctx.fillText("Hello canvas", 300, 90);let centerX = canvas.width / 2;let centerY = canvas.height / 2;let radius = 250;// 使用arc()方法绘制圆形ctx.beginPath(); // 开始路径ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI); // 绘制圆形ctx.closePath(); // 可选，闭合路径，对于填充整个圆是必需的// 填充或描边圆形// ctx.fill(); // 填充圆形// 或者ctx.stroke(); // 描边圆形
</script>
</body>
</html>
二、解释
这段HTML代码定义了一个页面，其中包含一个容器和一个canvas元素。通过JavaScript代码，使用canvas绘制了一个矩形、一个填充了颜色的矩形、一个文本以及一个圆形。
<!DOCTYPE html>声明文档类型为HTML5。
<html lang="zh-cn">表示文档语言为中文。
<head>部分包含了标题、字符编码以及CSS样式。
<title>定义了页面标题。
<meta charset="utf-8"/>指定了字符编码为UTF-8。
<style>定义了页面的CSS样式，包括body和.container的样式。
<body>部分是页面的主要内容。
<div class="container">创建了一个容器，设置了它的宽度和居中显示。
<h1>定义了一个标题，设置了居中显示和顶部外边距。
<canvas>创建了一个画布，设置了它的宽度、高度和边框样式。
<script>包含了JavaScript代码，用于在canvas上绘制图形。
const canvas = document.getElementById("myCanvas");获取了canvas元素的引用。
const ctx = canvas.getContext("2d");获取了canvas的2D绘图上下文。
ctx.beginPath();、ctx.rect(200, 200, 500, 500);和ctx.stroke();绘制了一个矩形。
ctx.fillStyle = "#00FF00";、ctx.fillRect(300, 300, 300, 300);在画布上填充了一个绿色的矩形。
ctx.font="50px Arial";、ctx.fillText("Hello canvas", 300, 90);绘制了一个文本。
最后通过ctx.beginPath();、ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);、ctx.closePath();、ctx.stroke();绘制了一个圆形。
