说明
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