创建一个星形并使用Javascript提供背景色

我想用Javascript画一个星星并给它一个背景色。这是JSFIDLE：-

但红色的背景色覆盖了整个斯考尔地区，我只想给那个颗星提供背景

这是Javascript：-

var canvas, ctx, length = 15; // length of the star's arm

// grab a reference to the 2d context from canvas element
canvas = document.getElementById("star");
ctx = canvas.getContext("2d");

// move into the middle of the canvas, just to make room
ctx.translate(30, 30);

// initial offset rotation so our star is straight
ctx.rotate((Math.PI * 1 / 10));

// make a point, 5 times
for (var i = 5; i--;) {
    // draw line up
    ctx.lineTo(0, length);
    // move origin to current same location as pen
    ctx.translate(0, length);
    // rotate the drawing board
    ctx.rotate((Math.PI * 2 / 10));
    // draw line down
    ctx.lineTo(0, -length);
    // again, move origin to pen...
    ctx.translate(0, -length);
    // ...and rotate, ready for next arm
    ctx.rotate(-(Math.PI * 6 / 10));
}
// last line to connect things up
ctx.lineTo(0, length);
ctx.closePath();
// stroke the path, you could also .fill()
ctx.stroke();

定义ctx后使用

ctx.fillStyle=“#f00”

，并在末尾使用

ctx.fill（）

。

---

在定义ctx后使用

ctx.fillStyle=“#f00”

，并在末尾使用

ctx.fill（）

。

使用

fillStyle

添加，不要忘了在

fillStyle

之后添加

fill（）

，否则它将不起作用

ctx.lineTo(0, length);
ctx.fillStyle = "#f22";
ctx.fill();
ctx.closePath();

---

使用

fillStyle

添加，不要忘记在

fillStyle

之后添加

fill（）

，否则它将不起作用

ctx.lineTo(0, length);
ctx.fillStyle = "#f22";
ctx.fill();
ctx.closePath();

---

我知道你使用的是canvas，但巧合的是，我今天遇到了类似的问题，遇到了这个很棒的线程：我知道你使用的是canvas，但巧合的是，我今天遇到了类似的问题，遇到了这个很棒的线程：