如何使用画布 JavaScript 在图像的 4 个角上绘制三角形答案

【问题标题】：How can I draw triangle on 4 corner of image using canvas JavaScript如何使用画布 JavaScript 在图像的 4 个角上绘制三角形
【发布时间】：2021-06-22 22:25:53
【问题描述】：

我正在图像的角上绘制矩形。为此，我正在使用 JavaScript。在这里，我从画布中获取图像数据。

// Get image data
let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
let arr = imgData .data;

我发现 n 是三角形相邻和对面的长度。

var n;
if (width > height) {
    n = height / 20;
} else {
    n = width / 20;
}

在这里，我正在使用这些循环在图像的左上角绘制背景为红色的三角形。

for (let y = 0; y < n; y++) {
for (i = y * imgData.width * 4; i < ((y * imgData.width * 4) + (n * 2)) - y; i = i + 4) {
        arr[i] = 255;
        arr[i + 1] = 0;
        arr[i + 2] = 0;
    }
  }

这是我得到的输出。

我的预期输出。 [

我被图像左上角的第一个三角形卡住了。我试图调试循环，但找不到错误。你能帮我找出错误吗？

图片参考： http://webgl-workshop.com/assets/e826db271aa3c03c69c4aca1e20abf5b.jpg

【问题讨论】：

为什么不实际画一个三角形呢？ beginPath(), moveTo(a corner), lineTo(horizontal side), lineTo(vertical side), fill()
是的，没有理由通过为单个像素着色来做到这一点：而是画一个三角形。它既简单又快得多。
i < ((y * imgData.width * 4) + (n * 2)) - y 中的最后一个y 需要乘以4（一个完整像素的大小（R、G、B、A））。但是@Niet 是完全正确的，没有理由不在这里使用简单的路径，而且由于您忘记设置 alpha，因此您的代码甚至会在这些角落出现透明的 png 图像时失败。

标签： javascript html canvas filter pixel

【解决方案1】：

这里是你如何编写代码来完成这个绘图任务

在 .html 中，使用 id="canvas" 引用您的画布

在 .js 文件中，输入以下代码。它绘制左上角。对其他 3 个角进行类似操作。

如果你成功了，请告诉我。享受:)！

var canvasElement = document.querySelector("#canvas");
var ctx = canvasElement.getContext("2d");
var n = 50; //default at 50px edge length

var triangle = {
    x1: 0, 
    y1: 0, 
    x2: 50, 
    y2: 0, 
    x3: 0, 
    y3: 50 
}

ctx.strokeStyle = 'red';

ctx.beginPath();
ctx.moveTo(triangle.x1, triangle.y1);
ctx.lineTo(triangle.x2, triangle.y2);
ctx.lineTo(triangle.x3, triangle.y3);
ctx.closePath();
ctx.stroke();

// the fill color
ctx.fillStyle = "#FF0000"; //or 'red'
ctx.fill();

【讨论】：