Question

i want draw this triangle with active regions

有活动区域的三角形支持其他解决方案的任何想法？区域与其他页面链接。我想建立这种结构，告诉我正确的方法

Answer 1

第一步：三角形

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.beginPath();              
ctx.lineWidth = "1";
ctx.strokeStyle = "#d3d3d3";  // Green path

ctx.moveTo(from_x_1, from_y_1);
ctx.lineTo(to_x_1, to_y_1);

ctx.moveTo(from_x_2, from_y_2);
ctx.lineTo(to_x_2, to_y_2);


ctx.moveTo(from_x_3, from_y_3);
ctx.lineTo(to_x_3, to_y_3);

ctx.stroke();  // Draw it


</script>

</body>
</html>

你只需要将from_x_n重新加入真实值。

第二次停止：检测点击

c.addEventListener('click', function(event) {
    console.log(event.pageX);
    console.log(event.pageY);

    //here you must check x and y
});

点击访问此链接：using canvas drawing square and triangle with customize color when click bottton，特别是http://jsfiddle.net/rcondori/3gmosgq7/

如何最好地使这个解决方案javaScript或画布

1 个答案: