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

Question

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

Answer 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.ax, triangle.ay); ctx.lineTo(triangle.bx, triangle.by); ctx.lineTo(triangle.cx, triangle.cy); 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; }

 <canvas id="canvas" width="400" height="400"></canvas>

您将不得不自己发明阻力效果。

Answer 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.ax, triangle.ay); ctx.lineTo(triangle.bx, triangle.by); ctx.lineTo(triangle.cx, triangle.cy); 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; }

 <canvas id="canvas" width="400" height="400"></canvas>