javascript绘图如何实现_如何使用Canvas绘制基本图形？

Canvas 是 HTML5 的位图绘图 API，通过 getContext('2d') 获取上下文，设置样式后调用 fillRect/strokeRect、lineTo/beginPath/stroke、arc 等方法绘制图形，需注意清空画布、beginPath 重置路径及弧度单位换算。

Canvas 是 HTML5 提供的位图绘图 API，通过 JavaScript 操作 <canvas></canvas> 元素的 2D 上下文（getContext('2d')），就能绘制线条、矩形、圆形、路径、文字等基本图形。关键在于获取上下文、设置样式、调用绘图方法、最后触发渲染。

获取 Canvas 上下文并清空画布

先在 HTML 中定义 canvas 元素，再用 JavaScript 获取其 2D 绘图上下文：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

立即学习“Java免费学习笔记（深入）”；

每次重绘前建议清空画布，避免残留图形干扰：

ctx.clearRect(0, 0, canvas.width, canvas.height);

绘制矩形（填充与描边）

Canvas 提供三类矩形方法，区别在于是否填充、是否描边：

• 填充矩形：ctx.fillRect(x, y, width, height) —— 实心矩形
• 描边矩形：ctx.strokeRect(x, y, width, height) —— 空心边框
• 清除矩形：ctx.clearRect(x, y, width, height) —— 透明区域（擦除）

使用前可设置颜色和线宽：

ctx.fillStyle = '#ff6b6b'; // 填充色
ctx.strokeStyle = '#4ecdc4'; // 描边色
ctx.lineWidth = 2;

标签： javascript java html go html5 区别 重绘 canva