在同一个canvas里显示多个图形

Question

代码：html:<canvas id="canvas1" width="800" height="150" style="border: 1px solid #ccc"></canvas> <script src="js/close.js" type="text/javascript"></script>js：function $$(id) {    return document.getElementById(id);}//绘制正多边形的封装函数window.onload = function () {    var cnv1 = $$("canvas1");    var cxt1 = cnv1.getContext("2d");    createPolygon(cxt1,3,300,75,50);    createPolygon(cxt1,4,400,75,50);    createPolygon(cxt1,5,500,75,50);    createPolygon(cxt1,6,600,75,50);    cxt1.fillStyle = "HotPink";    cxt1.fill();}//n - 表示n边形；dx、dy - 中心坐标；size - 表示n边形的大小function createPolygon(cxt, n, dx, dy, size) {    cxt.beginPath();    var degree = (2 * Math.PI) / n;    for(var i=0;i<n;i++){        var x = Math.cos(i * degree);        var y = Math.sin(i * degree);        cxt.lineTo(x * size + dx,y * size + dy);    }    cxt.closePath();}怎么可以让这几个多边形在同一个canvas里显示？求解答，谢谢。

Answer 1

填充了才是图形，你光画线有什么用

Answer 2

function $$(id) {

    return document.getElementById(id);

}

//绘制正多边形的封装函数

window.onload = function () {

    var cnv1 = $$("canvas1");

    var cxt1 = cnv1.getContext("2d");

    cxt1.fillStyle = "HotPink";

    createPolygon(cxt1,3,300,75,50);

    createPolygon(cxt1,4,400,75,50);

    createPolygon(cxt1,5,500,75,50);

    createPolygon(cxt1,6,600,75,50);

}

//n - 表示n边形；dx、dy - 中心坐标；size - 表示n边形的大小

function createPolygon(cxt, n, dx, dy, size) {

      cxt.beginPath();

    var degree = (2 * Math.PI) / n;

    for(var i=0;i<n;i++){

        var x = Math.cos(i * degree);

        var y = Math.sin(i * degree);

        cxt.lineTo(x * size + dx,y * size + dy);

    }

    cxt.closePath();

    cxt.fill();

}