不同形状的 HTML Canvas

Question

我创建了一个 HTML Canvas 并且在我检查过的所有地方都有一些宽度和高度，但我希望我的画布具有某种形状，例如可以转换为画布的星形或任何其他 png 图像。我尝试过一些东西，比如

<canvas class="question" id="canvas"></canvas>
<img src="img/11.png" id="scream">

<script>
var canvas = document.getElementById("canvas");
canvas.width = 200;
canvas.height = 200;
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 0, 0);
</script>

但它所做的只是制作一个带有图像的方形画布。我希望画布的形状像图像一样。

Answer 1

你可以试试这段代码。我希望这对你有帮助

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("scream");
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);

此代码将图像大小分配给画布。 由于所有图像都是二维的，因此画布大小必须是正方形或长方形。

Answer 2

基本形状

如果您使用 alpha（透明度）通道使不需要的像素透明，则画布可以是任何形状。

例子

    // draw image on canvas    
    const ctx = canvas.getContext("2d", {alpha: true}); // alpha option is the default
                                                        // I added it to show my intent
    canvas.width = scream.width;
    canvas.height = scream.height;
    ctx.drawImage(scream, 0, 0);

在画布上绘制图像后，您可以使用

globalCompositeOperation = "destination-in"

来保留像素。

例如以下将使画布圆形

    // draw a circle removing pixels outside the circle
    ctx.globalCompositeOperation = "destination-in";
    ctx.beginPath();
    const radius = Math.min(canvas.width, canvas.height) * 0.5;
    ctx.arc(canvas.width * 0.5, canvas.height * 0.5, radius, 0. Math.PI * 2);
    ctx.fill();
    ctx.globalCompositeOperation = "source-over";  // restore default comp op

您可以绘制任何形状，或使用图像（例如 SVG）来定义形状。

互动造型

如果您需要画布与需要了解形状的指针/鼠标事件交互，请使用 CSS clip-path 来定义形状。

使用clip-path.

的例子

    const ctx = canvas.getContext("2d");
    canvas.width = scream.width;
    canvas.height = scream.height;
    ctx.drawImage(scream, 0, 0);
    const radius = Math.min(canvas.width, canvas.height) * 0.5;
    canvas.style.clipPath = "circle(" + radius + "px)";