canvas - 不同的笔触风格，不同的线条

Question

需要几行，但风格不同。然而，所有的风格都是一样的。谢谢。

<script>
     (function draw_b() {


           var canvas = document.getElementById("cena3_pontos");
           var context = canvas.getContext("2d");

            //points
             context.fillStyle = "#ff0000"; //2 e 6 
             context.fillRect(72,95,2,2);
             context.fillRect(97,56,2,2);
             context.fillRect(120,17,2,2);


            /* 

            Diagonal line,represents points on grahic 

             */
             context.beginPath();
             context.moveTo(130,5); //  diagonal
             context.lineTo(-50,300);// 

            /*

            line dashs intersects diagonal line 

            */
            context.setLineDash([5,2])
            context.strokeStyle = "#ffffff";

            /*

            line width

            */
            context.lineWidth = 1;
            context.moveTo(50, 97); 


            //line dash //
            context.lineTo(70,97);
            context.moveTo(75, 95); 
            context.lineTo(75, 140);

            context.closePath();
            context.stroke();

        }())
</script>

Answer 1

context.beginPath 和 context.fill 或 context.stroke 之间的所有内容都将采用最后定义的样式。

例如，如果您开始路径，定义 10 个填充样式然后进行填充，那么您的所有填充将是第 10 个填充样式。

解决方案：使用 beginPath 开始每个独特的样式。