कैनवास पर दो माउस क्लिक के साथ मैं रेखा कैसे आकर्षित करूं?एचटीएमएल 5 कैनवास पर दो माउस क्लिक के साथ एक रेखा खींचे?
9
A
उत्तर
10
कोड काफी सरल है पर W3Schools उदाहरण के आधार पर है, लेकिन आप एक अच्छी नींव प्राप्त करने के लिए:
डेमो: http://jsfiddle.net/NpDdt/10/
जावास्क्रिप्ट:
var clicks = 0;
var lastClick = [0, 0];
document.getElementById('canvas').addEventListener('click', drawLine, false);
function getCursorPosition(e) {
var x;
var y;
if (e.pageX != undefined && e.pageY != undefined) {
x = e.pageX;
y = e.pageY;
} else {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return [x, y];
}
function drawLine(e) {
context = this.getContext('2d');
x = getCursorPosition(e)[0] - this.offsetLeft;
y = getCursorPosition(e)[1] - this.offsetTop;
if (clicks != 1) {
clicks++;
} else {
context.beginPath();
context.moveTo(lastClick[0], lastClick[1]);
context.lineTo(x, y, 6);
context.strokeStyle = '#000000';
context.stroke();
clicks = 0;
}
lastClick = [x, y];
};
3
यहां एक संपूर्ण उदाहरण http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_line
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script>
$(function(){
var point1 = new Array();
point1['x'] = false;
point1['y'] = false;
var point2 = new Array();
point2['x'] = false;
point2['y'] = false;
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
$(document).click(function(e){
if (false === point1['x'] || false === point1['y']) {
point1['x'] = e.pageX;
point1['y'] = e.pageY;
return;
}
else if (false === point2['x'] || false === point2['y']) {
point2['x'] = e.pageX;
point2['y'] = e.pageY;
console.log("second");
cxt.moveTo(point1['x'], point1['y']);
cxt.lineTo(point2['x'], point2['y']);
cxt.stroke();
}
});
});
</script>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border: 1px solid #000">Your browser does not support the canvas element.</canvas>
</body>
</html>
संबंधित मुद्दे
- 1. एचटीएमएल 5 कैनवास माउस व्हील इवेंट
- 2. एचटीएमएल 5 कैनवास और रेखा चौड़ाई
- 3. एचटीएमएल 5 कैनवास हिटस्टिंग
- 4. ए * एचटीएमएल 5 कैनवास
- 5. एचटीएमएल 5 पर स्पष्ट लाइन कैनवास
- 6. एचटीएमएल 5 कैनवास
- 7. एचटीएमएल 5 कैनवास जावास्क्रिप्ट
- 8. क्या सेट माउस के आधार पर एचटीएमएल 5 कैनवास में सभी माउस ड्रैगजेबल ऑब्जेक्ट्स हैं?
- 9. एचटीएमएल 5 के कैनवास
- 10. एचटीएमएल 5 कैनवास ऑब्जेक्ट इवेंट
- 11. एचटीएमएल 5 कैनवास:
- 12. एचटीएमएल 5 कैनवास
- 13. एचटीएमएल 5 कैनवास - छवि पृष्ठभूमि पर एक रेखा कैसे आकर्षित करें?
- 14. एचटीएमएल 5 कैनवास: माउस और बहुभुज टकराव का पता लगाने
- 15. एचटीएमएल 5 कैनवास
- 16. एचटीएमएल 5 कैनवास
- 17. एचटीएमएल 5 कैनवास - पथ
- 18. कैनवास पर एक घुमावदार पथ खींचे?
- 19. एचटीएमएल 5 कैनवास
- 20. एचटीएमएल 5 कैनवास मास्क
- 21. एचटीएमएल 5 कैनवास
- 22. एचटीएमएल 5 कैनवास
- 23. एचटीएमएल 5 कैनवास इकाइयों
- 24. एचटीएमएल 5 कैनवास बेजियर
- 25. एचटीएमएल 5 कैनवास
- 26. एचटीएमएल 5 कैनवास
- 27. एचटीएमएल 5 और कैनवास
- 28. एचटीएमएल 5 कैनवास
- 29. एचटीएमएल 5 कैनवास
- 30. एचटीएमएल 5 कैनवास: mousedown माउसअप माउसक्लिक
यह बेहतर होगा अगर उपयोगकर्ता ने कुछ दृश्य प्रतिक्रिया देने के लिए पहली क्लिक के बाद लाइन को दिखाया –
@MichaelBellamy यहां एक माउसअप mousedown ड्रैगगेबल है जिसमें उपयोगकर्ता प्रतिक्रिया है http://codepen.io/caleboleary/pen/PWMVOg शुरुआती बिंदु के लिए धन्यवाद ब्लेंडर –
@ कालेब 'लेलरी डांग, बहुत साफ! – moeiscool