html5 canvas 用细条纹填充圆圈

Question

我想知道是否可以像图中这样用阴影线填充半圆：

现在，我的身材是这样的：

后面的代码：

  // Top Circle
  ctx.beginPath();
  ctx.moveTo(middleX - bValueAtRatio / 2 + R, middleY - bValueAtRatio / 2);
  ctx.quadraticCurveTo(
    middleX,
    middleY + R,
    middleX + bValueAtRatio / 2 - R,
    middleY - bValueAtRatio / 2
  );
  ctx.fill();

Answer 1

您可以从自定义 canvas 对象创建填充图案。

// Create a new canvas
var p = document.createElement("canvas")
p.width=32;
p.height=16;
var pctx=p.getContext('2d');

var x0=36;
var x1=-4;
var y0=-2;
var y1=18;
var offset=32;

pctx.strokeStyle = "#FF0000";
pctx.lineWidth=2;
pctx.beginPath();
pctx.moveTo(x0,y0);
pctx.lineTo(x1,y1);
pctx.moveTo(x0-offset,y0);
pctx.lineTo(x1-offset,y1);
pctx.moveTo(x0+offset,y0);
pctx.lineTo(x1+offset,y1);
pctx.stroke();

ctx.beginPath();
ctx.moveTo(middleX - bValueAtRatio / 2 + R, middleY - bValueAtRatio / 2);
ctx.quadraticCurveTo(
    middleX,
    middleY + R,
    middleX + bValueAtRatio / 2 - R,
    middleY - bValueAtRatio / 2
);

// Create new pattern from custom canvas
ctx.fillStyle=ctx.createPattern(p,'repeat');
ctx.fill();

html5 canvas 用细条纹填充圆圈

html5 canvas fill circle with pinstripe

html

javascript

canvas

html5-canvas

reactjs