我正在使用 HTML Canvas 库来构建“饼图”现在要完成它,我需要在点击该部分后缩放或切片饼图的给定部分。
除了上述例外,我几乎完成了饼图
请不要推荐我使用任何已经可用的图表库
你想要的不能直接完成:当你在画布上绘画时,你画的像素会立即干燥到画布上。如果您想“放大”,则必须擦除画布 ( ctx.clearRect(...)
) 并使用更多像素重新绘制饼图。这是像 Canvas这样的非保留绘图模式(或即时绘图模式)图形 API 所需要的。
将此与 SVG 进行对比,这是一种保留的绘图模式图形系统,其中绘制内容的命令会导致创建元素,您可以跟踪事件、调整属性并查看为您更新的视觉结果。
您可以“放大” - 重新绘制更大的饼图 - 通过更改绘图命令(更大的arc
半径lineWidth
等)或转换上下文(更改比例和平移)然后再次发出相同的绘图命令。
还有一个不可选项:如果您保持画布的width
andheight
属性不变,但更改CSS
toheight
和width
属性,您可以在画布上“放大”而无需重新绘制。然而,这将导致画布上的每个虚拟像素在屏幕上增长,从而导致像素化。