JavaScript canvas 颜色属性:fillStyle、strokeStyle

说明

fillStyle

搭配 fill() 方法使用,设置填充颜色

strokeStyle

搭配 stroke() 方法使用,设置轮廓颜色

颜色值

// 这些 fillStyle 的值均为 '橙色'
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

例子

设置圆的填充色:

<canvas width="400" height="400" style="border: 1px solid #ccc;"></canvas>
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext('2d');
ctx.beginPath()
ctx.arc(10, 10, 3,0,Math.PI*2,true)
ctx.fillStyle = "red"
ctx.fill()

参考:
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors


原文出处:/show_1IX8ZFXrmqJC.html