清除canvas的任何图形

本文探讨了HTML5 Canvas中arcTo方法的应用及其最后一个参数radius的作用,并通过动态演示揭示其变化效果。同时解决了使用clearRect清除旧图形的问题。

现在在学习canvas,其中有个方法 arcTo ,文档的例子看的有点蒙,不太理解最后一个参数 radius 对图形绘制造成的影响,所以就像写一个可以改变 radius 时动态演示方法 arcTo 生成的曲线。

arcTo方法的在线文档点此

对于即时获取input的方法已经在前面的一篇文章中记录了,大概功能也完成了,但是有个巨大的问题:

在生成新的曲线的同时无法删去旧的曲线,虽然存在方法 clearRect 可以删去绘出的矩形,但是没有删去别的图形的方法


来自 stack overflow 的解答:

当你在一个 canvas 中绘制了一些图形之后,需要清除的仅仅是组成那些图形的像素,而不是那些图形本身。方法 clearRect 清除的并不是一个矩形,而是清除那片矩阵区域中绘制出的像素点。所以你可以使用 clearRect 方法去清除你绘制出的任何图形所在的矩形区域。

解决!对方法 clearRect 也有了一个比较深的理解


即时演示方法的代码点此

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值