HTML | 画布填充()方法

HTML的画布(canvas)元素提供了一个填充方法(fill())，该方法用于在画布上绘制填充形状。

语法

context.fill()

context是画布对象的上下文(context)，在使用填充方法之前，需要先使用该对象的属性、方法来设置绘图的属性，例如颜色、线宽、字体等。

填充属性

在使用fill()方法之前，需要先设置填充属性，包括：

填充颜色

设置填充颜色的方法有两种：

1. 使用CSS颜色值

context.fillStyle = "red";

2. 使用渐变色或图案填充

var gradient = context.createLinearGradient(0,0,200,0);
gradient.addColorStop(0,"red");
gradient.addColorStop(1,"white");
context.fillStyle = gradient;

填充规则

填充规则有两种：非零环绕数规则和奇偶规则。默认是非零环绕数规则。

context.fillRule = "evenodd"; // 奇偶规则

填充形状

fill()方法可以用于填充任意形状，包括矩形、圆、多边形等。

矩形

context.fillRect(x,y,width,height);

圆

context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
context.fill();

多边形

context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
...
context.closePath(); // 闭合路径
context.fill();

示例

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    
    // 设置填充色和规则
    context.fillStyle = "red";
    context.fillRule = "evenodd";
    
    // 绘制矩形
    context.fillRect(50, 50, 100, 100);
    
    // 绘制圆
    context.beginPath();
    context.arc(100, 100, 50, 0, 2*Math.PI);
    context.closePath();
    context.fill();
    
    // 绘制三角形
    context.beginPath();
    context.moveTo(50, 150);
    context.lineTo(100, 50);
    context.lineTo(150, 150);
    context.closePath();
    context.fill();
</script>

以上代码将在画布上绘制一个填充红色的矩形、圆和三角形。

参考链接：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/fill