0

我正在使用节点画布，我想知道如何在画布中设置导入图像的样式，类似于您在 CSS 中的图像。

例如，我如何将画布中的方形图像裁剪为圆形。在 CSS 中，您需要做的就是将边框半径设置为 50%。

4

2 回答 2

0

很明显，在这种情况下您不能使用 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 渲染上下文做什么。

于 2018-10-23T09:18:40.613 回答
0

我不知道这是否适用于节点，但是你可以用画布做到这一点；

  1. 最简单的方法是按照您的意图使用border-radius：
canvas{border-radius:50%;}
  1. 另一种方法是使用该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>
  1. 另一种方法是通过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();
于 2018-10-23T07:44:00.107 回答