css教程系列19:HTML5 Canvas(画布)

1  <canvas> 标签定义图形，比如图表和其他图像。

 例1:简单使用:

<canvas 
        id="Canva" width="200" height="100"
        style="background: yellowgreen"
></canvas>

 

2 Canvas 坐标

canvas 是一个二维网格。

canvas 的左上角坐标为 (0,0)

3 Canvas - 路径

常使用两种方法：

  1 moveTo(x,y) 定义线条开始坐标

  2 ineTo(x,y) 定义线条结束坐标

举个小栗子: 定义开始坐标(0,0), 和结束坐标 (100,50)。然后使用 stroke() 方法来绘制线条:

JavaScript代码:

var c=document.getElementById("Canva");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(100,50);
ctx.stroke();