Question

我使用以下代码在html5画布中绘制，但storkeStyle不起作用。我在控制台中看到this.color已更改，但保持绘制的颜色与orignal设置的颜色相同。（移动鼠标时会更新。）

    ctx.lineWidth = pixelRatio * this.lineThickness;
    ctx.strokeStyle = "rgba(" + this.color[0] + "," + this.color[1] + "," + this.color[2] + "," + this.color[3] + ")";
    ctx.beginPath()
    //ctx.beginPath();
    //Horizontal
    ctx.moveTo(pos[0] * pixelRatio, 0);
    ctx.lineTo(pos[0] * pixelRatio, (pos[1] - squareSize2) * pixelRatio);
    ctx.moveTo(pos[0] * pixelRatio, (pos[1] + squareSize2) * pixelRatio);
    ctx.lineTo(pos[0] * pixelRatio, frameState.size[1] * pixelRatio);


    //Vertical
    ctx.moveTo(0, pos[1] * pixelRatio);
    ctx.lineTo((pos[0] - squareSize2) * pixelRatio, pos[1] * pixelRatio);
    ctx.moveTo((pos[0] + squareSize2) * pixelRatio, pos[1] * pixelRatio);
    ctx.lineTo(frameState.size[0] * pixelRatio, pos[1] * pixelRatio);


    ctx.rect((pos[0] - squareSize) * pixelRatio, (pos[1] - squareSize) * pixelRatio, squareSize2 * pixelRatio, squareSize2 * pixelRatio);


    ctx.moveTo((pos[0] - squareSize4) * pixelRatio, pos[1] * pixelRatio);
    ctx.lineTo((pos[0] + squareSize4) * pixelRatio, pos[1] * pixelRatio);


    ctx.moveTo(pos[0] * pixelRatio, (pos[1] - squareSize4) * pixelRatio);
    ctx.lineTo(pos[0] * pixelRatio, (pos[1] + squareSize4) * pixelRatio);

    console.log("rgba(" + this.color[0] + "," + this.color[1] + "," + this.color[2] + "," + this.color[3] + ")");

    ctx.stroke();

Answer 1

问题在于我在颜色中有浮点值，它只在值没有小数点时才有效。

无法使帆布笔画风格起作用

1 个答案: