html5新增标签：canvas
2017-07-13 本文已影响116人
月光在心中
Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。Canvas 对象表示一个 HTML 画布元素 -<canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。
在html部分写如下代码，建议在标签之间加上一句“ 您的浏览器不支持canvas”，如果浏览器支持则之间渲染canvas，不会显示这句话。
<canvas id="canvas" width="300" height="300">
您的浏览器不支持canvas
</canvas>
接下来，就都是在js中写的脚本了。
//first,获取画布
var canvas = document.querySelector("#canvas");
//second,获取绘制环境
var ctx = canvas.getContext("2d");
canvas的重要方法
- moveTo(x,y)设置绘制线段的起点（用于表示一条新线的绘制）。
- lineTo(x,y)绘制线段到制定点，如果上第一条线，可以不使用moveTo，直接使用lineTo，否则建议一律使用moveTo。
- stroke() 描边（绘制）。
- closePath()闭合路径，将当前正在绘制的路径闭合
- fill() 填充
- fillstyle 设置填充样式，同strokestyle
- beginPath() 开始一条新路径的绘制
- beginPath 与 closePath没有一丁点关系
- fillRect(x,y,w,h)填充矩形
- strokeRect(x,y,w,h)描边矩形
- clearRect(x,y,w,h)擦除 指定的区域
- rect(x,y,w,h)定义矩形路径
- arc(cx,cy,radius,startAngle,endAngle[,是否逆时针])
绘制圆弧
cx | cy 圆心坐标
radius 半径
startRadian | endRadian 开始 | 结束 弧度
-fillText(string,x,y)填充文字
-strokeText(string,x,y)描边文字
文字属性：
font设置字体样式
textAlign设置文字水平对齐方式
textBaseline设置文字垂直对齐方式
cavas的常用属性
- lineWidth 设置线宽 ctx.lineWidth =10
- strokeStyle 设置描边样式 接收所有颜色类型
- lineJoin 设置线段交汇处的样式
bevel斜角
round圆角
miter尖角（默认） - lineCap设置线帽（只在断点处有效）butt无 默认 round 圆帽 square方帽
使用canvas做动画思路
通过定时器不断擦除，可以使用clearRect(x,y,w,h)方法。
入门canvas的例子
其中写了一个table坐标，帮助理解canvas的坐标点。
<!DOCTYPE html>
<html>
<head>
<title>canvas</title>
<meta charset="utf-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
canvas {
box-shadow: 2px 2px 5px black;
margin: 50px;
}
table {
border-collapse: collapse;
position: absolute;
top: 50px;
left: 50px;
}
table td {
width: 49px;
height: 49px;
border: 1px dotted #ccc;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500">
您的浏览器不支持canvas
</canvas>
<table></table>
</body>
<script type="text/javascript">
//first,获取画布
var canvas = document.querySelector("#canvas");
//second,获取绘制环境
var ctx = canvas.getContext("2d");
ctx.lineTo(50,50);
ctx.lineTo(100,100);
ctx.stroke();
var table = document.querySelector("table");
for (var i = 0; i < 10; i++) {
var tr = document.createElement("tr");
for (var j = 0; j < 10; j++) {
var td = document.createElement("td");
tr.appendChild(td);
}
table.appendChild(tr);
}
</script>
</html>
