(一)canvas简介

<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>
原文地址:https://www.cnblogs.com/bgwhite/p/9406780.html