javascript - quieres - figuras geometricas en html5
¿Cómo dibujar líneas de Canvas en HTML5 si el usuario ingresa puntos X, Y? (1)
Muy simple, podría usar 4 campos de entrada y tomar el valor de cada uno cuando se presiona un botón
button.addEventListener(''click'', function() {
ctx.beginPath();
ctx.moveTo(x1.value, y1.value);
ctx.lineTo(x2.value, y2.value);
ctx.stroke();
}, false);
Estoy tratando de construir un modelo de plano en Canvas. Actualmente tengo una imagen de cuadrícula en mi lienzo y tengo la capacidad para que los usuarios dibujen líneas haciendo clic y arrastrando su mouse. Pero esto no garantiza las líneas rectas.
¿De todos modos puedo proporcionar campos de entrada en la página html para que los usuarios ingresen el comienzo y el final de las coordenadas xey de las líneas, y lo actualicen en mi código de lienzo? Soy un principiante en lo que respecta a JS / AJAX, por lo que cualquier ayuda remedial es apreciada :)
En este momento, esta es la sección que dicta cómo se dibujan las líneas:
$ (document) .ready (function () {
var canvas = document.getElementById( ''canvas'' );
var context = canvas.getContext( "2d" );
if( canvas.getContext )
{
$( ''#canvas'' ).mousedown( function ( evt ){
var offset = $( ''#canvas'' ).offset();
context.beginPath();
context.moveTo( 20, 20 );
$( document ).mousemove( function( evt ) {
var offset = $( ''#canvas'' ).offset();
context.lineTo( evt.pageX - offset.left, evt.pageY - offset.top );
context.stroke();
} ).mouseup( function() {
$( document ).unbind( ''mousemove'' );
$( document ).unbind( ''mouseup'' );
} );
$( ''#clearcanvas'' ).click( function () {
context.clearRect( 0, 0, 600, 580);
} );
} );
Sospecho que implica la modificación de este código: context.lineTo (evt.pageX - offset.left, evt.pageY - offset.top);