我们先画一行
真正重要的方法是“函数”,“画线”、“stroke”和“strokeStyle”。
然后,上面的脚本,画了棕色的线。
<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>