如何最好地制作这个解决方案 javaScript 或 canvas答案

【问题标题】：how best make this solution javaScript or canvas如何最好地制作这个解决方案 javaScript 或 canvas
【发布时间】：2015-03-31 21:18:48
【问题描述】：

带有活动区域的三角形支持其他分辨率有什么想法吗？区域与其他页面的链接。我想建这个建筑，告诉我正确的方法

【问题讨论】：

“有什么想法吗？” 做什么？您没有清楚地解释您的问题，您只是谈到了“三角形”、“区域”、“页面”。如果您尝试过任何事情，请向我们提供更多详细信息，并发布您到目前为止的代码。我怀疑任何人都只能用这些信息来回答。
很抱歉我的英语不太好，我想建造这个建筑，但我无法选择更好的解决方案
“构建这个结构”。当然可以，但是这个construction一旦构建应该做什么呢？现在，它只是一个图像，我们不知道它应该做什么，或者应该用什么代替“1”，“2”和“3”......无论如何，如果你想要一个答案，您可能需要提供更多解释。
区域内的图片将以链接的形式出现
"java or canvas" 你的意思是 javaSCRIPT 可能吗？但画布也是 javascript。我的答案很快就来了

标签： javascript canvas

【解决方案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/

【讨论】：