communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

Tracer des lignes sur toile

La méthode beginPath de l'objet Context indique de commencer à tracer le chemin, la méthode moveTo(x, y) définit le point de départ du segment de ligne, la méthode lineTo(x, y) définit le point final du segment de ligne , et la méthode des traits est utilisée pour colorer le segment de ligne transparent. Les méthodes moveto et lineto peuvent être utilisées plusieurs fois. Enfin, vous pouvez également utiliser la méthode closePath pour tracer automatiquement une ligne droite du point actuel au point de départ afin de former une figure fermée, éliminant ainsi le besoin d'utiliser la méthode lineto une seule fois.

Le code est le suivant :

<body>
    <canvas id="demoCanvas" width="500" height="600">
    </canvas>
    <script type="text/javascript">
        //通过id获得当前的Canvas对象
        var canvasDom = document.getElementById("demoCanvas");
        //通过Canvas Dom对象获取Context的对象
        var context = canvasDom.getContext("2d");
        context.beginPath(); // 开始路径绘制
        context.moveTo(20, 20); // 设置路径起点，坐标为(20,20)
        context.lineTo(200, 200); // 绘制一条到(200,20)的直线
        context.lineTo(400, 20);
        context.closePath();
        context.lineWidth = 2.0; // 设置线宽
        context.strokeStyle = "#CC0000"; // 设置线的颜色
        context.stroke(); // 进行线的着色，这时整条线才变得可见
    </script>
</body>
Formation continue
||
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>huatu</title> <body> <canvas id="demoCanvas" width="500" height="600"> </canvas> <script type="text/javascript"> //通过id获得当前的Canvas对象 var canvasDom = document.getElementById("demoCanvas"); //通过Canvas Dom对象获取Context的对象 var context = canvasDom.getContext("2d"); context.beginPath(); // 开始路径绘制 context.moveTo(20, 20); // 设置路径起点，坐标为(20,20) context.lineTo(200, 200); // 绘制一条到(200,20)的直线 context.lineTo(400, 20); context.closePath(); context.lineWidth = 2.0; // 设置线宽 context.strokeStyle = "#CC0000"; // 设置线的颜色 context.stroke(); // 进行线的着色，这时整条线才变得可见 </script> </body> </html>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492873 joue