如何在画布中绘制菱形/平行四边形答案

【问题标题】：How to draw Rhombus/Parallelogram in canvas如何在画布中绘制菱形/平行四边形
【发布时间】：2021-05-08 17:33:53
【问题描述】：

我是使用画布的初学者，我需要在上面制作形状。

如何在画布上绘制菱形/平行四边形？

类似这样的：

我在矩形/正方形中绘制这样的东西没有问题：

var rectangle = new Path2D();
rectangle.rect(0, 0, width, height);

但我不知道如何绘制菱形/平行四边形。

感谢任何可以提供帮助的人。

【问题讨论】：

我不相信有一种内置的方法可以将形状全部绘制为一个，但是将四个边绘制为线条应该很简单。 stackoverflow.com/questions/4839993/…
没有任何输入格式是不可能给出答案的。你如何定义这些形状？凭他们的四分？只需调用 lineTo。通过宽度高度和 skewX 和 skewY 角度？要么你需要计算这四个点，要么你使用上下文变换矩阵。

标签： javascript html canvas

【解决方案1】：

从上到下直线拖动鼠标绘制菱形。仅适用于然后刷新浏览器并重试

let isDrawing = false;
let x = 0;
let y = 0;
var endPoint = [];
var startPoint = [];


const element = document.getElementById('drawFigure');
const ctx1 = element.getContext('2d');


element.addEventListener('mousedown', e => {
  x = e.offsetX;
  y = e.offsetY;
  isDrawing = true;
  startPoint.push({
    x: e.offsetX,
    y: e.offsetY
  });


});

element.addEventListener('mousemove', e => {
  if (isDrawing === false) {
 
    x = e.offsetX;
    y = e.offsetY;
   
   
    console.log( "x" +x  ,  "y" +y);
  }
});
window.addEventListener('mouseup', e => {
  if (isDrawing === true) {
    x = e.offsetX;
    y = e.offsetY;

    endPoint.push({
      x: e.offsetX,
      y: e.offsetY,
      fillcolor: 'blue'
    });
    drawLine();
    isDrawing = false;
  }
});


function drawLine() {

  ctx1.beginPath();
  ctx1.moveTo(startPoint[0].x,
  startPoint[0].y);

  var half = endPoint[0].y - startPoint[0].y

  var x1 = startPoint[0].x + half
  var y1 = startPoint[0].y + half / 2

  ctx1.lineTo(x1, y1)
  console.log(x1, y1);
  ctx1.moveTo(x1, y1)

  ctx1.lineTo(endPoint[0].x,
    endPoint[0].y);

  ctx1.lineTo(startPoint[0].x - half, y1);
  ctx1.lineTo(startPoint[0].x,
   startPoint[0].y);

  ctx1.stroke();
}
//------------- 

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(75, 75);
ctx.lineTo(135, 25);
ctx.lineTo(195, 75);
ctx.lineTo(135, 125);
ctx.closePath();
ctx.stroke();

canvas {
  border: 2px dotted black;
  width: 460px;
  height: 330px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>

<body>

  <canvas id="drawFigure" width="560" height="260"></canvas>
  <!---------------->

  <h3>Hard Stoke 1/2</h3>
  <canvas id="myCanvas"> </canvas>
  <!--      --->



</body>

</html>

【讨论】：

我将您的示例编辑为正在运行的 sn-p。您可以随时edit您的帖子，然后单击“编辑上面的 sn-p”链接以添加任何必要的更改