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();