-3
A
回答
2
第一步:三角
<!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>
你只需要remplace 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/
_ “什么想法?” _做什么?你没有清楚地解释你的问题,你只是谈论“三角形”,“地区”,“页面”。请给我们更多的细节,并张贴你迄今为止的代码,如果你尝试了任何东西。我怀疑任何人都只能回答这些信息。 – blex 2015-03-31 12:16:55
对不起,我的英语不太好,简单我想建立这个建设,我不能选择更好的解决方案 – user3006575 2015-03-31 12:20:30
_“建设这个建设”_。当然,但是这个_construction_一旦建成了,它应该做些什么呢?现在,这只是一个图像,我们不知道应该做什么,或者应该用什么来代替“1”,“2”和“3”......无论如何,如果你想要一个答案,你可能不得不提供更多解释。 – blex 2015-03-31 12:28:05