En mi solicitud tengo que dibujar líneas separadas. Una línea sólida y una línea discontinua. Estoy usando CanvasRenderingContext2D . Mi problema es cómo puedo dibujar una línea punteada y una línea continua usando el mismo contexto. Lo que he probado es:
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.setLineDash([2, 2]) ctx.moveTo(50, 50); // Begin first sub-path ctx.lineTo(200, 50); ctx.moveTo(50, 90); // Begin second sub-path ctx.lineTo(280, 120); ctx.stroke();Pero dibuja líneas como puntos. Tiene sentido por qué, porque estoy usando el mismo contexto para ambas líneas pero necesito usar el mismo contexto en mi aplicación. Acabo de dar un ejemplo mínimo. ¿Hay alguna forma de hacer esto?
En un lienzo, recomendaría usar algún tipo de prototipo para representar un punto en su sistema de coordenadas. Luego, simplemente puede pasar los puntos a su función drawLine y pasar un style adicional.
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); function Point(x, y) { this.x = x; this.y = y; } function drawLine(from, to, style=[]) { ctx.beginPath(); ctx.setLineDash(style) ctx.moveTo(from.x, from.y); ctx.lineTo(to.x, to.y); ctx.stroke(); ctx.closePath(); } drawLine(new Point(50, 50), new Point(200, 50)); // solid line drawLine(new Point(50, 90), new Point(280, 120), [2,2]); // dashed line <canvas id="canvas" width="500" height="500"></canvas>