холст JS заполнить дугу с изображением - PullRequest
Новая
       15

холст JS заполнить дугу с изображением

0 голосов
/ 11 января 2019

Я пытаюсь заполнить круг (дугу) изображением.

Вот мой код: 

draw() {
ctx.save();
let boulePat = new Image();
switch(this.couleur) {
  case "red":
    boulePat.src = "images/red.png";
    break;
  case "green":
    boulePat.src = "images/green.png";
    break;
  case "orange":
    boulePat.src = "images/orange.png";
    break;
  case "yellow":
    boulePat.src = "images/yellow.png";
    break; 
  case "purple":
    boulePat.src = "images/purple.png";
    break;
 }
  var pattern = ctx.createPattern(boulePat, "repeat");
  ctx.beginPath();
  ctx.arc(this.x, this.y, 15, 0, 2 * Math.PI);
  ctx.fillStyle = pattern;
  ctx.fill();
  ctx.restore();
}

При этом у меня пустые или черные кружки ...

Не могли бы вы помочь мне, пожалуйста? Большое спасибо.

1 Ответ

0 голосов
/ 11 января 2019

Вам нужно дождаться загрузки изображения, прежде чем вы сможете использовать его в createPattern, например:

См. этот стек ответа

Имейте в виду, что изображение будет начинаться с 0,0 координат относительно холста. Вам нужно будет учесть это в любых смещениях (используя ctx.transform(xOffset, yOffset)), если необходимо. 

var canvas = document.getElementById("myCanvasNoTranslate");
var canvas2 = document.getElementById("myCanvasWithTranslate");

function drawCanvas(_canvas) {
  var context = _canvas.getContext("2d");
  draw(context);
}

function draw(ctx) {
  ctx.save();
  ctx.strokeSyle = "rgb(0, 0, 0)";
  ctx.lineWidth = 3;
  ctx.strokeRect(0, 0, 400, 200);
  
  let boulePat = new Image();
  boulePat.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/16777216colors.png/100px-16777216colors.png";
  boulePat.onload = function () {
    var pattern = ctx.createPattern(boulePat, "repeat");
    ctx.fillStyle = pattern;
    ctx.beginPath();
    ctx.arc(100, 100, 50, 0, 2 * Math.PI);
    // translate canvas to offset where the image coordinates are for .fill()
    if (ctx.canvas === canvas2) {
      ctx.translate(50, 50);  
    }
    ctx.fill();
    // restore ctx back to before the translate()
    ctx.restore();
  }
}

drawCanvas(canvas);
drawCanvas(canvas2);
With ctx.translate() for background fill<br/>
<canvas id="myCanvasWithTranslate" height="200px" width="400px"></canvas>
<br/><br/>
Without ctx.translate() for background fill<br/>
<canvas id="myCanvasNoTranslate" height="200px" width="400px"></canvas>
...