html - 中间有洞的多边形，带有 HTML5 的画布

Question

使用<canvas>标签我需要能够在多边形上画一个洞。

现在我有一些非常简单的东西，它使用 beginPath() 然后为每个点执行 lineTo() 。然后用 fill() 填充。

不过，我看不到任何方法可以让填充的多边形中间没有填充，就像甜甜圈一样。我不是在做甜甜圈，但它适合这个例子。

有什么我想念的吗？我宁愿不把它画满，然后必须重新画中间。

Answer 1

这就是我让它工作的原因：

var ctx = canvas.getContext("2d");     
ctx.beginPath();

//polygon1--- usually the outside polygon, must be clockwise
ctx.moveTo(0, 0);
ctx.lineTo(200, 0);
ctx.lineTo(200, 200);
ctx.lineTo(0, 200);
ctx.lineTo(0, 0);
ctx.closePath();

//polygon2 --- usually hole,must be counter-clockwise 
ctx.moveTo(10, 10);
ctx.lineTo(10,100);
ctx.lineTo(100, 100);
ctx.lineTo(100, 10);
ctx.lineTo(10, 10);
ctx.closePath();

//  add as many holes as you want
ctx.fillStyle = "#FF0000";
ctx.strokeStyle = "rgba(0.5,0.5,0.5,0.5)";
ctx.lineWidth = 1;
ctx.fill();
ctx.stroke();

这里的主要思想是你只能使用一次 beginPath；外部多边形必须是顺时针方向，孔必须是逆时针方向。

Answer 2

您有 2 种选择来使用 HTML5 画布绘制洞。

选择1：
以不同的时钟方向绘制外形和内部形状。

外部形状顺时针，内部形状逆时针。
或者外部形状顺时针，内部形状逆时针。

ctx.beginPath();
//outer shape, clockwise
ctx.moveTo(100,20);
ctx.lineTo(200,200);
ctx.lineTo(20,200);
ctx.closePath();
//inner shape (hole), counter-clockwise
ctx.moveTo(100,100);
ctx.lineTo(70,170);
ctx.lineTo(140,170);
ctx.closePath();
//fill
ctx.fillStyle = "#FF0000";
ctx.fill();

我们在编码的时候检测形状绘制方向有点痛苦。

如果您需要检测一系列点是否顺时针，这里有一个很好的功能：

function isClockwise(dots){
    var sum = 0;
    for(var i=1, n=dots.length; i<n; i++){
        sum += (dots[i][0] - dots[i-1][0]) * (dots[i][1] + dots[i-1][1]);
    }
    sum += (dots[0][0] - dots[n-1][0]) * (dots[0][1] + dots[n-1][1]);
    return sum < 0;
}
console.log(isClockwise([[100,20], [200,200], [20,200]]));  //true
console.log(isClockwise([[100,20], [20,200], [200,200]]));  //false

如果您的点是顺时针方向但您需要逆时针方向，则 .reverse() 您的点数组。

var dots = [[100,20], [200,200], [20,200]];
dots.reverse();

---

选择 2：
使用“偶数”填充规则，向任何方向绘制形状。
这种方式比选择 1 简单得多。
参见fill() 方法 API：

   void ctx.fill();
   void ctx.fill(fillRule);
   void ctx.fill(path, fillRule);

fillRule可以是“nonzero”或“evenodd” “nonzero”
：非零缠绕规则，这是默认规则。
“evenodd”：奇偶缠绕规则。

ctx.beginPath();
//outer shape, any direction, this sample is clockwise
ctx.moveTo(100,20);
ctx.lineTo(200,200);
ctx.lineTo(20,200);
ctx.closePath();
//inner shape (hole), any direction, this sample is clockwise
ctx.moveTo(100,100);
ctx.lineTo(140,170);
ctx.lineTo(70,170);
ctx.closePath();
//fill
ctx.fillStyle = "#FF0000";
ctx.mozFillRule = 'evenodd'; //for old firefox 1~30
ctx.fill('evenodd'); //for firefox 31+, IE 11+, chrome

Answer 3

您可以使用偶数填充规则：fill('evenodd')

// properties
// - outer square
var outerLength = 200;
// - inner length
var innerLength = outerLength / 2;

// cnavas
var canvas = document.getElementById('canvas');
var width = canvas.width = document.body.clientWidth;
var height = canvas.height = document.body.clientHeight;
var context = canvas.getContext('2d');

// path
// - outer square
context.rect(
  (width - outerLength) / 2,
  (height - outerLength) / 2,
  outerLength,
  outerLength
);
// - inner square
var x0 = (width - innerLength) / 2;
var y0 = (height - innerLength) / 2;
context.moveTo(x0, y0);
context.rect(
  x0,
  y0,
  innerLength,
  innerLength
);

// draw
// - stroke
context.lineWidth = 10;
context.stroke();
// - fill
context.fillStyle = 'red';
context.fill('evenodd');

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

<canvas id="canvas"><canvas>

Answer 4

以顺时针方向绘制您的形状（例如）。然后你可以增加或减少半径并逆时针方向前进。