qué quieres propiedades nos movimiento mano lineas lienzo geometricas figuras etiqueta dibujar cuando crear comenzar ayuda alzada javascript ajax html5 canvas html5-canvas

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);

http://jsfiddle.net/TeGGx/

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);