如何使用 canvas JavaScript 在图像的 4 个角上绘制三角形

Question

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

// 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;
    }
  }

这是我得到的 output。

我预期的 output。 [

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

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

Answer 1

以下是您如何编写代码来完成此绘图任务

在.html，参考你的canvas with 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();