Как стилизовать изображения на холсте? - PullRequest
Новая
       40

Как стилизовать изображения на холсте?

0 голосов
/ 23 октября 2018

Я использую node-canvas, и мне было интересно, как стиль импортированного изображения на холсте похож на стиль изображения в CSS.

Например, как мне обрезать квадратное изображение на холсте, чтобыкруг.В CSS все, что вам нужно сделать, это установить радиус границы на 50%.

Ответы [ 2 ]

0 голосов
/ 23 октября 2018

Ну, очевидно, вы не можете использовать CSS в этом случае, поскольку CSS применяется к DOM, а не к пиксельному содержимому элемента Canvas.

Однако элемент Canvas имеет свой собственный набор функций рисования, которые позволяютвам повторить или хотя бы приблизительные правила CSS.

Поскольку вы упомянули обрезку изображения в круг, я сосредоточусь на этом примере.Для достижения этого эффекта вы должны указать область отсечения перед рисованием изображения.Каждый пиксель за пределами обрезанной области не будет нарисован.Фактически это обрезает изображение до обрезанного региона.

В коде: 

// Retrieve canvas and get context
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

// Save the context so we can undo the clipping region at a later time
context.save();

// Define the clipping region as an 360 degrees arc at point x and y
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);

// Clip!
context.clip();

// Draw the image at imageX, imageY.
context.drawImage(image, imageX, imageY);

// Restore context to undo the clipping
context.restore();

Я бы посоветовал взглянуть на эту страницу, чтобы дать вам представлениео том, что вы можете сделать с элементом Canvas и контекстом 2D-рендеринга.

0 голосов
/ 23 октября 2018

Я не знаю, будет ли это работать в узле, однако вы можете сделать это с помощью canvas;

  1. Самый простой способ сделать это - использовать, как вы и предполагали, border-radius: 
canvas{border-radius:50%;}
Другой способ сделать это - использовать метод ctx.clip(). 
let canvas = document.querySelector("canvas");
        let ctx = canvas.getContext("2d");

        ctx.beginPath();
        ctx.arc(125,120,100,0,2*Math.PI);

        // you clip the context
        ctx.clip();

        let img = document.querySelector("#testImg");
        ctx.drawImage(img, 0, 20);

<canvas width="250" height="240" >
  <img id="testImg" src="theImage.jpg">
</canvas>
Еще один способ сделать это - использовать ctx.globalCompositeOperation = "destination-atop" следующим образом: 
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let cw = canvas.width = 400,
  cx = cw / 2;
let ch = canvas.height = 400,
  cy = ch / 2;

 ctx.globalCompositeOperation = "destination-atop";

 let img = document.querySelector("#testImg");
 ctx.drawImage(img, 0, 0);

 ctx.beginPath();
 ctx.fillStyle = "#f00";
 ctx.arc(cx, cx, 100, 0, 2 * Math.PI);
 ctx.fill();
...