HTML画布Canvas怎么用_HTML5画布CANVAS标签绘图教程-html教程-PHP中文网

HTML画布Canvas怎么用_HTML5画布CANVAS标签绘图教程

看不見的法師

发布： 2025-10-05 16:54:02

原创

235人浏览过

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

html画布canvas怎么用_html5画布canvas标签绘图教程

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

创建Canvas画布

在HTML中使用<canvas>标签定义一个画布区域。建议设置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. 绘制矩形

万兴爱画

万兴爱画AI绘画生成工具

查看详情

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

以上就是HTML画布Canvas怎么用_HTML5画布CANVAS标签绘图教程的详细内容，更多请关注php中文网其它相关文章！