html5 - canvas如何实现多图重绘？

问题描述

问 题

如题，之前很少用canvas，所以很多知识都是初略了解。我想实现一个从、多图重绘的效果，如一些网上模板中雪花飘落的特效，就是不断重复绘制雪花（其他的逻辑且放到一边），那么应该如何重绘呢？

我自己看着手册上的指导，写了一个demo,可是仍然只绘制了一个（最后一个）；代码如下：

<canvas id="cvs"></canvas>
        <script>
            var cvs = document.getElementById("cvs");
            var ctx = cvs.getContext('2d');
            ctx.beginPath();
            ctx.fillStyle = "#FA8722";
            ctx.arc(100,75,50,0,2*Math.PI);
            ctx.fill();
            ctx.closePath();
            ctx.beginPath();
            ctx.fillStyle = "aquamarine";
            ctx.arc(100,75,50,0,2*Math.PI);
            ctx.fill();
        </script>

这是为什么？那么要怎样做才能再原canvas画布上绘制2个或多个图形？
另：吐槽一点，如我这样理解力弱鸡的童鞋，总觉得手册好坑，完全就是画火柴人=>人物素描的感觉，有没有比较循序渐进一点的文章推荐推荐呗

解决方案

从表象看，两个圆的路径是重叠了吧，第二个圆覆盖了第一个，调节一下位置再试试

这篇关于html5 - canvas如何实现多图重绘？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！