Canvas的Path分享，又一个html5知识点哦！

我们先画一行

然后,上面的脚本,画了棕色的线。

<div><canvas id="Canvas2" width="600" height = "200" style="border:solid 1px #000000;"></canvas>
   <div>
     <button οnclick="Vertical_line();return true;">Click me to draw a brown vertical line</button>
   </div> 
</div>
<script>
   var c3 = document.getElementById("c3");
   var c3_context = c3.getContext("2d");

   function Vertical_line() {
     c3_context.moveTo(300, 10);
     c3_context.lineTo(300, 190);
     c3_context.strokeStyle = "brown";
     c3_context.stroke();
   }
</script>

真正重要的方法是“函数”,“画线”、“stroke”和“strokeStyle”。

上下文方法 描述
函数(x,y) 搬到起点,x和y坐标。
画线(x,y) 画一条线从起点这一点。再次x和y坐标。
strokestyle  css线的颜色
stroke的方法 实际上使javascript画一条线
beginPath 在你开始画一个新的和不同的颜色,你将不得不叫“beginPath”。

<div>
<canvas id="c4" width="600" height = "200" style="border:solid 1px #000000;"></canvas>
<div>
  <button οnclick="Vertical_2px_Red();return true;">Vertical 2px Red line</button>
  <button οnclick="Vertical_1px_Blue();return true;">Vertical 1px Blue line</button>
  <button οnclick="Horizontal_2px_Green();return true;">Horizontal 2px Green line</button>
  <button οnclick="Clear_line();return true;">Erase Everything</button>
</div> 
</div>

<script>
var c4 = document.getElementById("c4");
var c4_context = c4.getContext("2d");

function Vertical_2px_Red() {
c4_context.beginPath();
c4_context.moveTo(300, 10);
c4_context.lineTo(300, 190);
c4_context.strokeStyle = "Red";
c4_context.stroke();
}

function Vertical_1px_Blue() {
c4_context.beginPath();
c4_context.moveTo(350.5, 10);
c4_context.lineTo(350.5, 190);
c4_context.strokeStyle = "Blue";
c4_context.stroke();
}

function Horizontal_2px_Green() {
c4_context.beginPath();
c4_context.moveTo(100, 100);
c4_context.lineTo(500, 100);
c4_context.strokeStyle = "Green";
c4_context.stroke();
}

function Clear_line() {
c4_context.clearRect(1, 1, 600, 190);
}
</script>