使用 HTML5 Canvas 和 Javascript 绘制 MS Paint Triangle 工具答案

【问题标题】：Drawing the MS Paint Triangle tool using HTML5 Canvas and Javascript使用 HTML5 Canvas 和 Javascript 绘制 MS Paint Triangle 工具
【发布时间】：2017-06-04 05:17:28
【问题描述】：

我是 javascript 和 Canvas 的新手，想知道如何像在 MS Paint 中一样通过单击和拖动鼠标在画布上绘制三角形，其中三角形的大小取决于用户拖动的程度。

【问题讨论】：

如果您是 JavaScript 新手，那么您可能应该从学习在画布中绘制 任何东西 开始。查看MDN 获取教程，并在您有一些实际代码时返回。

标签： javascript html dom canvas

【解决方案1】：

这是一个起点：

//HTML elements
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//Current unconnected points
var mouse = [];
//Existing triangles
var triangles = [];
//The function that draws
function draw() {
    //Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    //Draw existing triangles
    for (var tIndex = 0; tIndex < triangles.length; tIndex++) {
      var triangle = triangles[tIndex];
      ctx.beginPath();
      ctx.moveTo(triangle.a.x, triangle.a.y);
      ctx.lineTo(triangle.b.x, triangle.b.y);
      ctx.lineTo(triangle.c.x, triangle.c.y);
      ctx.closePath();
      ctx.stroke();
    }
    //Draw current mouse points
    if (mouse.length > 0) {
      ctx.beginPath();
      ctx.moveTo(mouse[0].x, mouse[0].y);
    }
    if (mouse.length > 1) {
      ctx.lineTo(mouse[1].x, mouse[1].y);
    }
    if (mouse.length > 0) {
      ctx.stroke();
    }
  }
  //Catch point
canvas.onclick = function eventHandler(event) {
  //Add points to list
  mouse.push({
    x: event.layerX,
    y: event.layerY
  });
  //If we have enough points, add a triangle
  if (mouse.length >= 3) {
    //Adding the triangle
    triangles.push({
      a: mouse[0],
      b: mouse[1],
      c: mouse[2]
    });
    //Clear points
    mouse = [];
  }
  //Update canvas
  draw();
};

body,
html,
* {
  margin: 0px;
  padding: 0px;
}
#canvas {
  background-color: #ddd;
}

&lt;canvas id="canvas" width="400" height="400"&gt;&lt;/canvas&gt;

你必须自己发明拖曳效果。

【讨论】：

【解决方案2】：

//HTML elements
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//Current unconnected points
var mouse = [];
//Existing triangles
var triangles = [];
//The function that draws
function draw() {
    //Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    //Draw existing triangles
    for (var tIndex = 0; tIndex < triangles.length; tIndex++) {
      var triangle = triangles[tIndex];
      ctx.beginPath();
      ctx.moveTo(triangle.a.x, triangle.a.y);
      ctx.lineTo(triangle.b.x, triangle.b.y);
      ctx.lineTo(triangle.c.x, triangle.c.y);
      ctx.closePath();
      ctx.stroke();
    }
    //Draw current mouse points
    if (mouse.length > 0) {
      ctx.beginPath();
      ctx.moveTo(mouse[0].x, mouse[0].y);
    }
    if (mouse.length > 1) {
      ctx.lineTo(mouse[1].x, mouse[1].y);
    }
    if (mouse.length > 0) {
      ctx.stroke();
    }
  }
  //Catch point
canvas.onclick = function eventHandler(event) {
  //Add points to list
  mouse.push({
    x: event.layerX,
    y: event.layerY
  });
  //If we have enough points, add a triangle
  if (mouse.length >= 3) {
    //Adding the triangle
    triangles.push({
      a: mouse[0],
      b: mouse[1],
      c: mouse[2]
    });
    //Clear points
    mouse = [];
  }
  //Update canvas
  draw();
};

body,
html,
* {
  margin: 0px;
  padding: 0px;
}
#canvas {
  background-color: #ddd;
}

&lt;canvas id="canvas" width="400" height="400"&gt;&lt;/canvas&gt;

【讨论】：