<canvas>元素主要用来图形的绘制,通过脚本来完成(通常时js来实现);
可以利用其实现图表,游戏等项目的开发。
-
getContext
-
获取画布的摸板是2d还是3d
-
strokeRect(x,y,w,h);
-
四个参数: x轴,y轴,宽度,高度
-
主要用来设置边框,可以理解为border
-
fillRect(x,y,w,h);
-
四个参数:x轴,y轴,宽度,高度
-
主要用来设置内容盒子,可以理解为div
注:
-
canvas是h5新增标签,兼容性问题可以卸载canvas标签中来进行处理,
-
宽度和高度的设置需要写成行内样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <style> body { background-color: black; } #c1 { background: #fff; } </style> <body> <!--canvas标签的大小需要写成内敛样式--> <canvas id="c1" width="400" height="400">兼容处理:在这里的代码是看不见的,不支持canvas的浏览器是可以看到的</canvas> <script> var oC = document.getElementById("c1"); var ctx = oC.getContext("2d"); // ctx.fillRect(0,0,100,100);//四个参数下x,y,w,h 默认颜色为黑色 ctx.strokeRect(50,100,100,100);//默认颜色为黑色,默认边框大小1px </script> </body> </html>