跳到主要内容

strokeStyle

2023年08月11日
柏拉文
越努力，越幸运

一、认识​

ctx.strokeStyle 是 Canvas 2D API 描述画笔（绘制图形）颜色或者样式的属性。默认值是 #000 (black)。

二、语法​

ctx.strokeStyle = color;
ctx.strokeStyle = gradient;
ctx.strokeStyle = pattern;

  • color: DOMString 字符串，可以转换成 CSS <color> 值。

  • gradient: CanvasGradient 对象（线性渐变或放射性渐变）。

  • pattern: CanvasPattern 对象（可重复的图片）。

三、场景​

3.1 切换轮廓线颜色​

<canvas id="canvas"></canvas>

<script>
    const canvas = document.querySelector("#canvas");
    canvas.width = 500;
    canvas.height = 500;
    const ctx = canvas.getContext('2d');

    ctx.strokeStyle = 'red';
    ctx.strokeRect(0,0,100,100);
</script>