javascript - 为什么我的 HTML5 Canvas 绘图会这样?

标签 javascript html canvas

我正在学习使用 HTML5 Canvas ,并且我决定对圆形的绘制进行动画处理:

http://codepen.io/anon/pen/KdpyVm

它从一个点开始正确地开始绘制,然后完成一个圆。但显然有一些基本的事情我不明白。

  1. 为什么在绘制时,圆弧最初显示为粗体,然后线条变细了 3/4?它是否以某种方式重新绘制自身?
  2. 当弧endAngle达到2PI时,为什么不重新开始?

最佳答案

您没有清除整个 Canvas (仅左上角部分),因此线条中的额外粗细是在重绘圆圈时未清除的 Canvas 部分中发生的:

ctx.clearRect(0,0,600,600);

<强> http://codepen.io/anon/pen/wKaPgz

关于javascript - 为什么我的 HTML5 Canvas 绘图会这样?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32456201/

相关文章:

Javascript - 根据时间(毫秒)生成值

javascript - 将 VueJS 数据属性重置为初始值

javascript - 用其他语言编写 JavaScript

javascript - 如何在一个二维 Canvas 上下文上一次绘制多条线?多用户画板

java - 如何在不使用 XML 的情况下在 Android 中的 Canvas 元素上显示广告?

javascript - 使用 .offset() 使用 jQuery 缩放图像

javascript - 在嵌套的 Accordion 中打开特定的 Accordion 面板(Bootstrap v3)

html - 如何使用 bootstrap 或纯 css 制作响应式断点内容

html - BootStrap 3 - 带下拉菜单的导航栏,下拉菜单的扩展超出最大高度

javascript - 试图让一个 Canvas 跟随另一个 Canvas ,这太疯狂了