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>section suivante