2.画布api
canvas.getContext("2d");
canvas.width
canvas.height
var ctx = canvas.getContext("2d");
canvas.width=552;
canvas.height=800;
3.上下文api
ctx.fillRect(x,y,w,h):填充矩形
ctx.strokeRect(x,ymwmh):带边框的矩形
ctx.clearRect(0,0,oc.width,oc.height):清除整个画布
注意原点的位置
ctx.fillStyle
ctx.strokeStyle
ctx.lineWidth
var ctx=canvas.getContext("2d");
//设置图形的填充颜色
ctx.fillStyle = "blue";
//实心矩形
ctx.fillRect(0,0,100,100)
//设置图形轮廓的颜色
ctx.strokeStyle = "blue";
//带边框的矩形
// 100 : 99.5 --- 100.5(99-101)
// 100.5: 100 --- 101
ctx.strokeRect(100.5,100.5,100,100)
ctx.lineCap
CanvasRenderingContext2D.lineCap 是 Canvas 2D API 指定如何绘制每一条线段末端的属性。有3个可能的值，分别是：butt, round and square。默认值是 butt。
ctx.lineCap = "butt"; ctx.lineCap = "round"; ctx.lineCap = "square";
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineWidth = 15;
ctx.lineCap = "round";
ctx.lineTo(100, 100);
ctx.stroke();
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{
height: 100%;
overflow: hidden;
}
body{
background: greenyellow;
}
#test{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom:0;
margin: auto;
background: gray;
}
</style>
</head>
<body>
<canvas id="test" width="300" height="300">
<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
</canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineWidth = 15;
ctx.lineCap = "round";
ctx.lineTo(100, 100);
ctx.stroke();
</script>
</html>
View Code
ctx.lineJoin
Canvas 2D API 用来设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为0的变形部分，其指定的末端和控制点在同一位置，会被忽略）
ctx.lineJoin = "bevel"; ctx.lineJoin = "round"; ctx.lineJoin = "miter";
<script type="text/javascript">
var canvas = document.getElementById("test");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 10;
ctx.lineJoin = "round";
//清楚子路径列表,开始新路径
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(200, 100);
ctx.lineTo(300,0);
ctx.stroke();
</script>
</html>
ctx.moveTo(x,y):将画笔抬起点到x，y处
ctx.lineTo(x,y):将画笔移到x，y处
ctx.rect(x,y,w,h)
ctx.arc(x,y,r,degS,degE,dir)
ctx.arcTo(x1,y1,x2,y2,r):2个坐标，一个半径
结合moveTo(x,y)方法使用，
x,y:起始点
x1,y1：控制点
x2,y2：结束点
ctx.quadraticCurveTo(x1,y1,x2,y2)
结合moveTo(x,y)方法使用，
x,y:起始点
x1,y1：控制点
x2,y2：结束点
必须经过起点和终点
ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3)
结合moveTo(x,y)方法使用，
x,y:起始点
x1,y1：控制点
x2,y2：控制点
x3，y3：结束点
必须经过起点和终点
ctx.fill()
ctx.stroke()
ctx.beginpath():清除路径容器
ctx.strokeStyle="red";
ctx.lineWidth="3";
ctx.moveTo(450,250);
ctx.lineTo(550,50);
ctx.lineTo(300,200);
//绘制线段
ctx.stroke();
//闭合路径
ctx.closePath();
//充填内部
ctx.fill();
ctx.closepath():闭合路径
fill自动闭合
stroke需要手动闭合
ctx.save()
将画布当前状态(样式相关 变换相关)压入到样式栈中
ctx.restore()
将样式栈中栈顶的元素弹到样式容器中
图像最终渲染依赖于样式容器
ctx.save();
//关于样式的设置
//save restore成对出现
ctx.beginPath();
//关于路径
ctx.restore();
ctx.save();
//关于样式的设置
ctx.beginPath();
//关于路径
ctx.fill();
ctx.restore();
ctx.translate(x,y):将原点按当前坐标轴位移x，y个单位
ctx.rotate(弧度):将坐标轴按顺时针方向进行旋转
ctx.scale(因子):
放大：放大画布，画布中的一个css像素所占据的物理面积变大，画布中包含的css像素的个数变少
画布中图像所包含的css像素的个数不变
缩小：缩小画布，画布中的一个css像素所占据的物理面积变小，画布中包含的css像素的个数变多
画布中图像所包含的css像素的个数不变