Dessiner des lignes pointillées sur une toile HTML5?
je voudrais dessiner quelques lignes pointillées sur la toile HTML5. Mais je n'ai pas pu trouver une telle caractéristique. le chemin de la toile ne pouvait que tracer des lignes solides. Et les gens ont essayé d'utiliser une fonction de bordure (pointillée, tiretée) dans CSS pour dessiner des lignes tiretées, mais elles ne pouvaient être qu'horizontales ou verticales. Donc, je suis coincé sur cette. J'ai aussi trouvé une bibliothèque appelée RGraph et il pourrait dessiner des lignes en pointillés. Mais utiliser une bibliothèque externe rendrait le dessin vraiment lent. Ainsi que tout corps a un idée de comment mettre en œuvre cela? Toute aide sera appréciée.
5 réponses
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.setLineDash([5, 3]);/*dashes are 5px and spaces are 3px*/
ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();
POUR INFORMATION - les lignes pointillées et tiretées font partie de nouvelles caractéristiques de la toile qui sont maintenant dans le spec - et déjà implémentés dans Chrome:
http://www.rgraph.net/blog/2013/january/html5-canvas-dashed-lines.html
C'est une façon plus facile de créer des lignes tiretées :
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.setLineDash([5, 15]);
ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();
J'espère que ça aidera.
Vous pouvez utiliser le setLineDash() méthode.
context.setLineDash([2,3]);
http://www.rgraph.net/blog/2013/january/html5-canvas-dashed-lines.html
dessin lignes tiretées sur toile
je vous offre ce jusqu' comme solution complète, mais comme moyen simple de tracer une ligne pointillée entre 2 points (une ligne à n'importe quel angle). Il dessine très vite.
Vous pouvez le modifier pour répondre à vos besoins d'une ligne pointillée. Dessin tirets ne devrait pas ralentir le dessin.
Voici le code et un Violon: http://jsfiddle.net/m1erickson/pW4De/
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
DrawDottedLine(300,400,7,7,7,20,"green");
function DrawDottedLine(x1,y1,x2,y2,dotRadius,dotCount,dotColor){
var dx=x2-x1;
var dy=y2-y1;
var spaceX=dx/(dotCount-1);
var spaceY=dy/(dotCount-1);
var newX=x1;
var newY=y1;
for (var i=0;i<dotCount;i++){
drawDot(newX,newY,dotRadius,dotColor);
newX+=spaceX;
newY+=spaceY;
}
drawDot(x1,y1,3,"red");
drawDot(x2,y2,3,"red");
}
function drawDot(x,y,dotRadius,dotColor){
ctx.beginPath();
ctx.arc(x,y, dotRadius, 0, 2 * Math.PI, false);
ctx.fillStyle = dotColor;
ctx.fill();
}