-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/
相關問題
- 1. 哪種解決方案把手發佈/訂閱方案更好?
- 2. 哪種解決這種遊戲最好的方法是?
- 3. 最好的方法使用帆布
- 4. 最好的jQuery拖放解決方案
- 5. 哪個佈局會是最好的解決方案?
- 6. 在java中最好的鞦韆的佈局解決方案
- 7. 遞歸在這種情況下的最優解決方案?
- 8. 這是最好的anagram檢查解決方案嗎?
- 9. 在這裏鑄造最好的解決方案嗎?
- 10. JavaScript封閉解決方案在這裏,如何使用它?
- 11. 用信號量解決這種情況的最佳解決方案是什麼?
- 12. Codecademy Javascript'這個'和解決方案
- 13. 更好的解決方案?
- 14. 最佳解決方案:add或addu
- 15. Javascript模板或其他解決方案?
- 16. 如何在javascript中實現決策樹。尋找比我醜陋的解決方案更好的解決方案
- 17. TFS並使用多種解決方案
- 18. 如何解決這種佈局?保證金或填充?
- 19. 發佈Asp.Net解決方案
- 20. 如何解決這種排序方法?
- 21. 從一種解決方案調試到另一種解決方案
- 22. 解決這種JavaScript死循環的最佳方法是什麼?
- 23. 這兩種解決方案哪一種更高效? (Java Hashset)
- 24. 最佳解決方案
- 25. 最佳的解決方案
- 26. 最佳解決方案
- 27. 最佳SQL解決方案?
- 28. 如何使用Django使用Tornado?這是一個好的解決方案嗎?
- 29. 需要解決方案如何解決這個錯誤
- 30. JavaScript解決方案window.close()?
_ 「什麼想法?」 _做什麼?你沒有清楚地解釋你的問題,你只是談論「三角形」,「地區」,「頁面」。請給我們更多的細節,並張貼你迄今爲止的代碼,如果你嘗試了任何東西。我懷疑任何人都只能回答這些信息。 – 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