HTML5Canvas绘图基础教程

想要快速入门HTML5 Canvas绘图？本文为你提供一份超实用的教程！通过``标签和JavaScript，轻松创建可编程的绘图区域，实现各种图形、文字和动画效果。本教程将从Canvas画布的创建开始，详细讲解如何获取2D绘图上下文`ctx`，并利用`fillRect`、`strokeRect`绘制矩形，`beginPath`、`moveTo`、`lineTo`绘制路径，`arc`绘制圆形，以及`fillText`绘制文字、`drawImage`绘制图像。此外，还将介绍如何使用`requestAnimationFrame`实现动画效果，以及`clearRect`清除画布内容。掌握这些基础知识，你就能迈出Canvas开发的第一步，开启无限创意！

答案：HTML5的标签通过JavaScript绘制图形。首先创建带宽高的画布，获取2D上下文ctx，用fillRect、strokeRect绘矩形，beginPath结合moveTo/lineTo画路径，arc画圆，fillText写字，drawImage绘图（需onload），requestAnimationFrame实现动画，clearRect清除，掌握这些即可入门Canvas开发。

HTML5中的标签提供了一块可编程的绘图区域，通过JavaScript可以在这个区域内绘制图形、文字、图像甚至动画。它本身不包含任何绘图能力，必须依赖脚本控制。下面是一个实用的入门教程，帮助你快速掌握Canvas的基本用法。

创建Canvas画布

在HTML中使用标签定义一个画布区域。建议设置width和height属性来定义尺寸，避免使用CSS拉伸，否则可能导致图像失真。

<canvas id="myCanvas" width="400" height="300">
  您的浏览器不支持Canvas。
</canvas>

上面代码定义了一个400×300像素的画布。如果浏览器不支持Canvas，会显示其中的提示文本。

获取绘图上下文

Canvas真正的绘图操作需要通过JavaScript获取“绘图上下文”。最常用的是2D上下文：

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

ctx就是绘图的接口对象，所有绘制命令都通过它执行。

绘制基本图形

有了绘图上下文后，就可以开始画图了。以下是几个常见的绘图操作：

1. 绘制矩形

• ctx.fillRect(x, y, width, height)：绘制实心矩形
• ctx.strokeRect(x, y, width, height)：绘制空心边框矩形
• ctx.clearRect(x, y, width, height)：清除指定区域

ctx.fillStyle = 'blue';        // 填充颜色
ctx.fillRect(50, 50, 100, 80); // 实心矩形
<p>ctx.strokeStyle = 'red';       // 边框颜色
ctx.lineWidth = 3;             // 边框宽度
ctx.strokeRect(200, 50, 100, 80);</p>

2. 绘制路径（线条、三角形等）

• ctx.beginPath()：开始新路径
• ctx.moveTo(x, y)：移动到起点
• ctx.lineTo(x, y)：画线到某点
• ctx.closePath()：闭合路径
• ctx.stroke()：描边路径
• ctx.fill()：填充路径

ctx.beginPath();
ctx.moveTo(100, 150);
ctx.lineTo(150, 100);
ctx.lineTo(200, 150);
ctx.closePath();
ctx.fillStyle = 'green';
ctx.fill();

3. 绘制圆形

ctx.beginPath();
ctx.arc(300, 200, 50, 0, Math.PI * 2); // x, y, 半径, 起始角度, 结束角度
ctx.fillStyle = 'purple';
ctx.fill();

绘制文字和图像

绘制文字：

ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello Canvas', 10, 30);           // 填充文字
ctx.strokeText('Outline Text', 10, 60);         // 描边文字

绘制图片：

const img = new Image();
img.src = 'example.jpg';
img.onload = function() {
  ctx.drawImage(img, 10, 10);                    // 绘制图片
  ctx.drawImage(img, 10, 10, 100, 80);          // 指定宽高
}

注意：图片必须在加载完成（onload）后再绘制，否则可能无法显示。

动画基础

利用requestAnimationFrame可以创建平滑动画。例如让一个小球移动：

let x = 0;
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
  ctx.beginPath();
  ctx.arc(x, 150, 20, 0, Math.PI * 2);
  ctx.fillStyle = 'orange';
  ctx.fill();
  x += 2;
  if (x > canvas.width) x = 0;
  requestAnimationFrame(animate);
}
animate();

基本上就这些。Canvas的核心是获取上下文，然后调用绘图方法。从简单图形到复杂交互可视化，都可以基于这个基础扩展。多练习路径、颜色、变换和动画，就能掌握它的强大功能。

本篇关于《HTML5Canvas绘图基础教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！