Nouvelle fonctionnalité HTML5 : utilisez la balise canvas pour tracer plusieurs lignes droites avec des captures d'écran des compétences du didacticiel effect

L'exemple suivant utilise la balise canvas pour tracer plusieurs lignes droites

Copiez le code Le code est le suivant : index_trois ="text/javascript" src="js/index.js"/> étiqueter. //Obtenir l'objet Canvas (canvas) var canvas = document.getElementById("myCanvas"); //Détectez simplement si le navigateur actuel prend en charge l'objet Canvas pour éviter de provoquer des erreurs de syntaxe dans certains navigateurs qui ne prennent pas en charge HTML5 if(canvas.getContext){ //Obtenez l'objet CanvasRenderingContext2D correspondant (pinceau ) var ctx = canvas.getContext("2d"); //La couleur de la ligne ctx.strokeStyle="#FF9933" //La largeur de la ligne en pixels ctx. lineWidth=10; //La forme à deux niveaux de la ligne ctx.lineCap="round" //Notez que le système de coordonnées de Canvas est : le coin supérieur gauche. Le coin du canevas Canvas est l'origine (0,0), la coordonnée horizontale est à droite, la coordonnée verticale est vers le bas et l'unité est le pixel (px). //Démarrer un nouveau chemin de dessin ctx.beginPath(); //Définir les coordonnées du point de départ de la ligne droite comme (10,10) ctx.moveTo(50, 50) ; //Définissez les coordonnées du point final de la ligne droite comme (50,10) ctx.lineTo(350, 250); ctx.moveTo(50, 240); lineTo(360, 60); ctx.moveTo(50, 200); ctx.lineTo(300, 40); //Trace une ligne droite le long du chemin de l'ordre des points de coordonnées ctx.stroke(); //Ferme le chemin de dessin actuel ctx.closePath(); } /html>