Canvas 填充路径 fill()

前面章节中我们知道了如何绘制各种路径,如果路径是闭合的 (调用了 closePath() 方法),那么还可以使用特定的颜色来填充它

fill() 方法

fill() 方法根据当前的填充样式,填充当前或已存在的路径,可选的填充方法有非零环绕或者奇偶环绕

void ctx.fill();
void ctx.fill(fillRule);
void ctx.fill(path, fillRule);
参数 说明
fillRule 一种算法,决定点是在路径内还是在路径外,允许的值:
"nonzero": 非零环绕规则, 默认的规则
"evenodd": 奇偶环绕规则
path 可选,需要填充的 Path2D 路径

非零环绕或者奇偶环绕

当路径非常复杂时,怎么个复杂法呢,就是纵横交错,比如下面张路径

非零环绕填充方式如下

奇偶环绕填充方式如下

范例

下面的范例绘画了一个绿色的三角形

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="400" height="300">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");

ctx.fillStyle="green"

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.lineTo(120,120);
ctx.closePath();
ctx.fill();
ctx.stroke();
</script>

运行结果如下


注意

可以从上图中看到,填充的时候只是填充内部,边框还是存在的,这就是路径绘图与其它方法的不同

Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.