canvas 的作用是提供一块可由 javascript 控制的绘图区域，其核心在于通过获取上下文对象进行图形绘制，1. 首先通过 getelementbyid 获取 canvas 元素，再调用 getcontext("2d") 获取 2d 绘图上下文；2. 利用上下文方法绘制矩形、圆形、线条、文本和图像，所有图形均基于路径构建；3. 动画通过 clearrect 清除并结合 requestanimationframe 循环重绘实现；4. 性能优化包括减少状态变更、使用离屏 canvas 缓存静态内容、控制 canvas 尺寸、避免重复绘制、利用硬件加速及缓存复杂图形；5. 鼠标事件需手动计算坐标，通过 getboundingclientrect 转换为 canvas 内部坐标，并用数学公式或 ispointinpath 判断点击区域；6. canvas 与 svg 的主要区别在于前者是基于像素的位图，后者是基于矢量的 dom 元素，canvas 适合高性能图形和动画，svg 适合可访问、可缩放和需 dom 操作的场景，选择应根据性能、可访问性、缩放需求和图像处理要求综合决定。
Canvas 标签本质上是 HTML 中的一块空白画布，你可以用 JavaScript 在上面绘制各种图形、图像，甚至动画。它本身不具备任何绘图能力，所有的绘制工作都需要通过 JavaScript 代码来完成。
Canvas 标签提供了一个基于像素的绘图表面，非常灵活，但这也意味着你需要编写更多的代码来实现复杂的图形效果。
解决方案：
立即学习“前端免费学习笔记（深入）”；
要理解 Canvas 的作用，需要掌握几个核心概念：
获取 Canvas 元素和绘图上下文： 首先，你需要通过 JavaScript 获取到 HTML 中的
<canvas>
<canvas id="myCanvas" width="200" style="max-width:90%"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 现在你可以使用 ctx 对象进行绘图了
</script>基本图形绘制： 2D 上下文提供了一系列方法来绘制基本图形，例如矩形、圆形、线条和文本。
矩形：
ctx.fillStyle = "red"; // 设置填充颜色 ctx.fillRect(10, 10, 50, 50); // 绘制一个填充的矩形 (x, y, width, height) ctx.strokeStyle = "blue"; // 设置边框颜色 ctx.strokeRect(70, 10, 50, 50); // 绘制一个空心矩形
圆形：
ctx.beginPath(); // 开始一个新的路径 ctx.arc(100, 50, 30, 0, 2 * Math.PI); // 绘制一个圆形 (x, y, radius, startAngle, endAngle) ctx.fillStyle = "green"; ctx.fill(); // 填充圆形 ctx.closePath(); // 关闭路径
线条：
ctx.beginPath(); ctx.moveTo(10, 80); // 移动到起始点 ctx.lineTo(190, 80); // 绘制一条线到终点 ctx.strokeStyle = "black"; ctx.stroke(); // 绘制线条 ctx.closePath();
文本：
ctx.font = "20px Arial"; // 设置字体
ctx.fillStyle = "purple";
ctx.fillText("Hello Canvas", 10, 20); // 绘制填充文本 (text, x, y)路径： 路径是 Canvas 绘图的核心概念。你可以通过一系列的绘图命令来定义一个复杂的路径，然后填充或描边这个路径。
ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineTo(100, 20); ctx.lineTo(100, 70); ctx.closePath(); // 自动闭合路径 ctx.fillStyle = "orange"; ctx.fill();
图像： 你可以将图像绘制到 Canvas 上。
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 10, 10, 50, 50); // 绘制图像 (image, x, y, width, height)
};
img.src = "image.png"; // 设置图像源动画： 通过不断地清除 Canvas 并重新绘制，可以创建动画效果。
requestAnimationFrame()
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除 Canvas
// 绘制动画元素
requestAnimationFrame(draw); // 请求下一帧动画
}
draw();Canvas 性能优化是一个需要认真对待的问题，尤其是在处理复杂图形或动画时。以下是一些常用的技巧：
减少状态改变： Canvas 的绘图上下文维护着许多状态，例如
fillStyle
strokeStyle
font
// 不好的做法： ctx.fillStyle = "red"; ctx.fillRect(10, 10, 20, 20); ctx.fillStyle = "blue"; ctx.fillRect(40, 10, 20, 20); // 更好的做法： ctx.fillStyle = "red"; ctx.fillRect(10, 10, 20, 20); ctx.fillStyle = "blue"; ctx.fillRect(40, 10, 20, 20);
如果颜色相同，可以先绘制所有的红色矩形，然后再绘制所有的蓝色矩形。
离屏 Canvas： 对于静态或不经常改变的内容，可以先在离屏 Canvas 上绘制，然后将整个离屏 Canvas 绘制到主 Canvas 上。 这样可以避免每次都重新绘制静态内容。
// 创建一个离屏 Canvas
var offscreenCanvas = document.createElement("canvas");
offscreenCanvas.width = canvas.width;
offscreenCanvas.height = canvas.height;
var offscreenCtx = offscreenCanvas.getContext("2d");
// 在离屏 Canvas 上绘制静态内容
offscreenCtx.fillStyle = "gray";
offscreenCtx.fillRect(0, 0, canvas.width, canvas.height);
// 在主 Canvas 上绘制离屏 Canvas
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(offscreenCanvas, 0, 0); // 绘制离屏 Canvas
// 绘制动态内容
requestAnimationFrame(draw);
}
draw();使用 requestAnimationFrame：
requestAnimationFrame()
setTimeout()
setInterval()
requestAnimationFrame()
减少 Canvas 大小： Canvas 越大，需要处理的像素就越多，性能也就越低。 尽量将 Canvas 的大小设置为实际需要的大小，避免不必要的浪费。
避免不必要的重绘： 只在需要更新时才重绘 Canvas。 可以通过比较前后状态来判断是否需要重绘。
使用硬件加速： 某些 CSS 属性可以触发硬件加速，例如
transform
opacity
优化 JavaScript 代码： Canvas 的性能也受到 JavaScript 代码的影响。 优化 JavaScript 代码，例如减少循环次数、避免不必要的计算等，可以提高 Canvas 的整体性能。
合理使用缓存： 对于一些复杂的图形，可以先将其绘制成图像，然后将图像缓存起来，下次直接使用缓存的图像。
Canvas 本身并不像 DOM 元素那样直接支持鼠标事件。你需要自己计算鼠标在 Canvas 上的位置，并判断是否点击了某个图形。
获取鼠标在 Canvas 上的坐标：
canvas.addEventListener("mousemove", function(event) {
var rect = canvas.getBoundingClientRect(); // 获取 Canvas 的位置和大小
var x = event.clientX - rect.left; // 计算鼠标在 Canvas 上的 x 坐标
var y = event.clientY - rect.top; // 计算鼠标在 Canvas 上的 y 坐标
// 现在你可以使用 x 和 y 来判断鼠标是否在某个图形上
});判断鼠标是否在某个图形上： 对于简单的图形，例如矩形和圆形，可以使用简单的数学公式来判断。
矩形：
function isPointInRect(x, y, rectX, rectY, rectWidth, rectHeight) {
return x >= rectX && x <= rectX + rectWidth && y >= rectY && y <= rectY + rectHeight;
}
canvas.addEventListener("click", function(event) {
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
if (isPointInRect(x, y, 10, 10, 50, 50)) {
console.log("点击了矩形");
}
});圆形：
function isPointInCircle(x, y, circleX, circleY, radius) {
var dx = x - circleX;
var dy = y - circleY;
return dx * dx + dy * dy <= radius * radius;
}
canvas.addEventListener("click", function(event) {
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
if (isPointInCircle(x, y, 100, 50, 30)) {
console.log("点击了圆形");
}
});对于复杂的路径，可以使用 方法：isPointInPath()
登录后复制
canvas.addEventListener("click", function(event) {
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(100, 20);
ctx.lineTo(100, 70);
ctx.closePath();
if (ctx.isPointInPath(x, y)) {
console.log("点击了路径");
}
});事件委托： 如果 Canvas 上有很多图形，可以考虑使用事件委托来提高性能。 将事件监听器添加到 Canvas 元素上，然后根据鼠标点击的位置来判断点击了哪个图形。
Canvas 和 SVG 都是 Web 上用于绘制图形的技术，但它们有着本质的区别：
选择 Canvas 还是 SVG，取决于你的具体需求：
Canvas 的优点：
Canvas 的缺点：
SVG 的优点：
SVG 的缺点：
总结：
以上就是canvas标签的作用？HTML画布如何绘制图形？的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号
969
