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

我们先画一行
然后,上面的脚本,画了棕色的线。

<div><canvas id="Canvas2" width="600" height = "200" style="border:solid 1px #000000;"></canvas>
<div>
<button onclick="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 onclick="Vertical_2px_Red();return true;">Vertical 2px Red line</button>
<button onclick="Vertical_1px_Blue();return true;">Vertical 1px Blue line</button>
<button onclick="Horizontal_2px_Green();return true;">Horizontal 2px Green line</button>
<button onclick="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>