javascript - Why do transparent objects become opaque when animating canvas element? -
i'm trying js app move balls on canvas element. set context.fillstyle = "rgba(12, 34, 56, 0.2)";
problem balls become opaque transparent after short period of time. how can maintain transparency , why become opaque?
here simplified version of code:
function startscript(){ var layer1 = document.getelementbyid("layer1"); var context1 = layer1.getcontext("2d"); var posx = 5; context1.fillstyle = "rgba(12, 34, 56, 0.05)"; animate(); function animate() { posx+=3; context1.arc(posx, 200, 5, 0, math.pi*2); context1.fill(); // request new frame requestanimframe(function() { animate(); }); } } window.requestanimframe = (function(callback) { return window.requestanimationframe || window.webkitrequestanimationframe || window.mozrequestanimationframe || window.orequestanimationframe || window.msrequestanimationframe || function(callback) { window.settimeout(callback, 1000 / 60); }; })();
you have use context1.beginpath before new line draws
otherwise, context remembers , redraws previous arc in addition new arc.
also, should context1.closepath() after drawing circle-arc.
otherwise context drawing unclosed arc instead of circle.
context1.beginpath(); context1.arc(posx, 200, 5, 0, math.pi*2); context1.closepath(); context1.fill();
Comments
Post a Comment