Canvas常用的绘图技巧
canvas 用于在页面上 绘制图形
1.canvas概述:
html5 canvas元素和javascript配合使用在页面上绘制图形
canvas是一个画布,在画布上绘制 路径 矩形 圆形…
创建canvas
<canvas id width height></canvas>
2.canvas绘制图形: ---》javascript绘制
Canvas本身没有绘图能力, 绘制工作都是在javascript中完成*****
1》 js 得到元素
2》 元素.getContext(“2d”) html5的内建对象,绘制2d图形 拥有 绘制矩形 路径 圆形 字符…等方法
cxt.fillStyle = "#ff0000"; //绘制填充色
cxt.fillRect(25,10,150,75);//x,y,w,h 确定形状 25,10 起点坐标
注意:不支持canvas
<canvas id="myCanvas" width="200" height="100">
您的浏览器不支持canvas
</canvas>
3. 绘制直线和矩形
直线:
cxt.moveTo(10,10); 原始起点
cxt.lineTo(150,50); 原始起点的终点,是同一个2d图形的 下一条直线 起点
cxt.stroke(); 输出
矩形:
cxt.strokeStyle = "#ff0000"; 矩形边框色
cxt.strokeRect(10,10, 50, 50); 绘制矩形坐标
cxt.fillStyle = "#ff0000";填充颜色
cxt.fillRect(10,10,150,150);填充位置
4 绘制圆形:
1》 Html5 圆形 的度数
2》 绘制圆形
cxt.arc(x,y,radius,startAngle,endAngle,其他参数(true 逆时针 false 顺时针))
x,y 起点
radius 半径
startAngle 起点度数
endAngle 终点度数
5 绘制三角形
BeginPath() 开始的绘制路径
6 清除画布元素:
Cxt.clearRect(x,y,width,height) 清除 从(x,y) 宽高范围内的画布 元素
7.保存和回复canvas的状态
Cxt.save()保存状态的
Cxt.restore() 回复保存的状态,包括边框和填充色
8.移动坐标空间:
Translate:画布圆点移动
Translate(150,150)
原来的 0,0 ---》150,150
9. 图片堆叠