缩放或切片画布 HTML5 的一部分
我正在使用 HTML Canvas 库构建一个“PIE Chart” 现在要完成它我需要 单击该部分后，可以对 PIE 图表的给定部分进行缩放或切片。
除了上述例外，我几乎完成了 PIE 图表
请不要建议我使用任何现有的图表库
I working on HTML Canvas library to construct a "PIE Chart" Now to finish it I need the
given section of PIE Chart to Zoom or Slice once clicked on the section.
I almost done with the PIE Chart with the above exception only
Please do not recommend me to use any charting library available already
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您想要的东西无法直接完成：当您在画布上绘画时，您绘制的像素会立即干燥到画布上。如果您想“放大”，则必须擦除画布 (
ctx.clearRect(...)) 并使用更多像素重新绘制饼图。这就是 Canvas 等非保留绘图模式（或立即绘图模式）图形 API 所需要的。将此与 SVG 进行对比，SVG 是一种保留的绘图模式图形系统，其中绘制内容的命令会导致创建元素，您可以跟踪其事件、调整属性并查看为您更新的视觉结果。
您可以“放大”——将饼图重新绘制得更大——通过更改绘图命令（更大的
arc半径、lineWidth等）或通过 改变你的环境（改变比例和平移），然后再次发出相同的绘图命令。还有一个不可选项：如果您保持画布的
width和height属性不变，但将CSS更改为 < code>height 和width属性，您可以在画布上“放大”而无需重新绘制。然而，这将导致画布上的每个虚拟像素在屏幕上增长，从而导致像素化。What you want cannot directly be done: when you draw on the canvas, you paint pixels that instantly dry onto the canvas. If you want to "zoom in" you'll have to erase the canvas (
ctx.clearRect(...)) and re-paint your pie chart using more pixels. This is what a non-retained drawing mode (or immediate drawing mode) graphics API like Canvas requires.Contrast this with SVG, a retained drawing mode graphics system, where the commands to draw content result in elements being created that you may track events for, adjust properties on, and see the visual results updated for you.
You can "zoom in"--redraw your pie chart larger--either by changing your drawing commands (bigger
arcradius,lineWidth, etc.) or by transforming your context (changing the scale and translation) and then issuing the same drawing commands again.There is also one non-option: if you leave the
widthandheightattributes of the canvas unchanged but change theCSStoheightandwidthproperties you can 'zoom in' on your canvas without re-drawing. This is going to cause each virtual pixel on the canvas to grow on your screen, however, resulting in pixelation.