Parce que l'API Canvas n'a pas de lignes pointillées
Vous devez donc le mettre en œuvre vous-même
Ne serait-il pas sympa de revoir les fonctions trigonométriques au passage ?
var context=document.getElementById(canvas).getContext(2d);function drawDashedLine(context,x1,y1,x2,y2,dashlength){ dashlength=dashlength===undefined?5:dashlength; var deltaX=x2-x1; //La longueur d'un côté rectangle var deltay=y2-y1 //La longueur de l'autre côté d'instruction var numDashes=Math.floor( Math.sqrt(deltaX*deltaX+deltay*deltay)/dashlength //Math.sqrt renvoie la racine carrée d'un nombre dashlength et la longueur de chaque point de la ligne pointillée) var eachdashLength_x=deltaX/numDashes //Détermine chaque point sur l'axe X Le point de départ de la ligne pointillée pointe var everydashLength_y=deltay/numDashes //Déterminez le point de départ de chaque point de ligne pointillée sur l'axe Y for(var i=0;i<numDashes;i++){ context[i%2===0?'moveTo':lineTo] (x1+everydashLength_x* je,y1 +everydashLength_y*i) } context.Stroke()}context.lineWidth=3context.StrokeStyle=bluedrawDashedLine(context,20,20,context.canvas.width-20,20,20)L'effet est comme indiqué sur la figure
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.