canvas
HTML5<canvas>
元素用于图形的绘制,通过脚本(通常是JavaScript)来完成。
<canvas>
标签只是图形容器,必须使用脚本来绘制图形。
可以通过多种方法 使用canvas绘制路径,盒、圆、字符以及添加图像。
一个画布在网页中是一个矩形框,通过<canvas>
元素来绘制。
注意:默认情况下<canvas>
元素没有边框和内容。
<canvas id="canvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
canvas是一个二维网格。
canvas的左上角坐标为(0,0)
上面的fillRect方法拥有参数(0,0,150,75)。
意思是:在画布上绘制150*75的矩形,从左上角开始(0,0)