Canvas通过JavaScript绘制图形，先创建canvas元素并获取2D上下文，再用fillRect、arc、stroke等方法绘图，结合fillStyle、font、drawImage设置样式与图像，利用requestAnimationFrame实现动画，需注意清屏和路径重置。
HTML5 中的 Canvas 是一个强大的绘图 API，允许你在网页上绘制图形、文本、图像，甚至动画。它本质上是一个空白的矩形区域，通过 JavaScript 控制其上下文进行绘图。
1. 创建 Canvas 元素
在 HTML 文件中使用 canvas> 标签定义一个绘图区域。建议设置 width 和 height 属性，否则默认为 300×150 像素。
这个元素本身不会显示任何内容，需要通过 JavaScript 获取上下文来绘图。
2. 获取绘图上下文
Canvas 绘图必须通过 JavaScript 操作。使用 getContext() 方法获取 2D 渲染上下文，这是绘图的基础。
立即学习“前端免费学习笔记（深入）”；
const canvas = document.getElementById(‘myCanvas’);
const ctx = canvas.getContext(‘2d’);
ctx 就是你后续调用所有绘图方法的对象。
3. 绘制基本图形
有了上下文后，可以开始绘制形状。以下是几种常见操作：
绘制矩形：
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); // 蓝色实心矩形
绘制路径（如线条、三角形）：
ctx.beginPath()：开始新路径ctx.moveTo(x, y)：移动画笔到某点ctx.lineTo(x, y)：画线到指定点ctx.stroke()：描边路径ctx.fill()：填充路径
示例：画一条线ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
4. 绘制圆形和弧线
使用 arc() 方法绘制圆或弧。
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);x, y：圆心坐标radius：半径startAngle 到 endAngle：起始和结束角度（弧度制）
示例：画一个完整的圆ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.stroke();
5. 设置样式和颜色
你可以自定义线条和填充的外观：
ctx.fillStyle = ‘red’：设置填充颜色ctx.strokeStyle = ‘green’：设置描边颜色ctx.lineWidth = 5：设置线条宽度ctx.lineCap = ’round’：线条端点样式
6. 绘制文本
Canvas 支持绘制文本内容：
ctx.fillText(“Hello”, x, y)：绘制实心文字ctx.strokeText(“Hello”, x, y)：绘制空心文字
可用 font 属性设置字体样式：
ctx.font = ’20px Arial’;
7. 绘制图像
使用 drawImage() 方法将图片绘制到 Canvas 上。
const img = new Image();
img.src = ‘image.png’;
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
注意：必须等图片加载完成后再绘制，否则可能不显示。
8. 简单动画示例
结合 requestAnimationFrame() 可实现动画效果。
let x = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, 100, 50, 50);
x += 2;
if (x > canvas.width) x = 0;
requestAnimationFrame(animate);
}
animate();
这段代码让一个方块从左向右移动，超出边界后回到起点。
基本上就这些。掌握以上基础后，你可以尝试更复杂的图形、渐变、阴影、变换（rotate、scale）等高级功能。Canvas 不复杂但容易忽略细节，比如清屏、路径重置和单位转换。多练习几个小项目，很快就能上手。
以上就是HTML5怎么使用Canvas绘图_HTML5 Canvas绘图教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1588766.html
微信扫一扫 
支付宝扫一扫 
