html5 canvas 圆形抗锯齿
2015年02月26日 11:00
0 点赞
0 评论
更新于 2025-11-21 16:27
在 HTML5 Canvas 中绘制圆形时，有时会出现锯齿现象，影响图形的显示效果。下面将详细介绍如何实现圆形抗锯齿，并给出具体的实现代码。
效果图说明
将后续提供的代码复制到一个 HTML 文件中并保存，直接打开该 HTML 文件即可看到效果。
实现代码
<!doctype html>
<html lang="zh">
<head>
<meta charset="gbk">
<title>锯齿图</title>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded() {
// 定义变量 x 和 y 用于循环计数
var x, y;
// 获取 canvas 元素
var theCanvas = document.getElementById("canvas");
// 获取 2D 绘图上下文
var context = theCanvas.getContext("2d");
// 绘制矩形边框
// 设置边框颜色为蓝色
context.strokeStyle = '#00f';
// 设置边框线宽为 10
context.lineWidth = 10;
// 绘制矩形边框，坐标从 (0, 0) 开始，宽度和高度为 canvas 的宽度和高度
context.strokeRect(0, 0, theCanvas.width, theCanvas.height);
// 设置填充颜色为蓝色
context.fillStyle = "#00f";
// 在顶部和底部绘制半圆
for (x = 5; x <= theCanvas.width; x = x + 10) {
// 开始新的路径
context.beginPath();
// 在顶部绘制半圆
context.arc(x, 5, 5, 0, Math.PI, false);
// 关闭路径
context.closePath();
// 填充路径
context.fill();
// 开始新的路径
context.beginPath();
// 在底部绘制半圆
context.arc(x, theCanvas.height - 5, 5, 0, Math.PI, true);
// 关闭路径
context.closePath();
// 填充路径
context.fill();
}
// 在左右两侧绘制整圆
for (y = 5; y <= theCanvas.height; y = y + 10) {
// 开始新的路径
context.beginPath();
// 在左侧绘制整圆
context.arc(5, y, 5, 0, Math.PI * 2, true);
// 在右侧绘制整圆
context.arc(theCanvas.width - 5, y, 5, 0, Math.PI * 2, true);
// 关闭路径
context.closePath();
// 填充路径
context.fill();
}
}
</script>
</head>
<body>
<div style="position: absolute; top: 100px; left: 100px;">
<canvas id="canvas" width="300" height="300"></canvas>
</div>
</body>
</html>
代码解释
- HTML 结构：创建了一个基本的 HTML 页面，包含一个
canvas元素，用于绘制图形。 - JavaScript 部分：
- 使用
window.addEventListener监听页面加载完成事件，当页面加载完成后执行eventWindowLoaded函数。 - 在
eventWindowLoaded函数中，首先获取canvas元素和 2D 绘图上下文。 - 绘制一个矩形边框，设置边框颜色和线宽。
- 通过两个
for循环，在canvas的顶部、底部和左右两侧绘制半圆和整圆，并填充颜色。
- 使用
在现代浏览器中，Canvas 本身已经具备一定的抗锯齿能力，上述代码绘制的圆形会自动进行抗锯齿处理，使圆形边缘更加平滑。