最后一個(gè)案例,如果不使用closePath(),同時(shí)進(jìn)行填充,此時(shí)的lineWidth=5,會(huì)出現(xiàn)鋸齒,如果lineWidth=1,就和使用closePath()的現(xiàn)象相同。
話說有點(diǎn)好奇每次都clearRect 然后再重新繪制,這樣子會(huì)不會(huì)造成一點(diǎn)性能的影響?還是說基本動(dòng)畫實(shí)現(xiàn)原理都是這樣子的
2017-10-25
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
2017-10-18
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"}
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"}
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
2017-10-18
畫圓弧時(shí)context.fill()和context.closePath()還是的閉合效果有些區(qū)別的,context.fill()接口處會(huì)出現(xiàn)鋸齒,而closePath()會(huì)添加新邊框,如果填充樣式顏色不一致,邊框是不同的顏色。