在H5里我们会常用到canvas这个元素来绘制图形。那么我们今天就来介绍一下canvas怎么使用,canvas在哪些情形下可以使用。以及canvas的绘画技巧
canvas 用于在页面上 绘制图形
canvas概述:
html5 canvas元素和javascript配合使用在页面上绘制图形
canvas是一个画布,在画布上绘制 路径 矩形 圆形…
canvas绘制图形: ---》javascript绘制
Canvas本身没有绘图能力, 绘制工作都是在javascript中完成*****
js 得到元素
元素.getContext(“2d”) html5的内建对象,绘制2d图形 拥有 绘制矩形 路径 圆形 字符…等方法
cxt.fillStyle = "#ff0000"; //绘制填充色
cxt.fillRect(25,10,150,75);//x,y,w,h 确定形状 25,10 起点坐标
注意:不支持canvas
您的浏览器不支持canvas
绘制直线和矩形
直线:
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);填充位置
绘制圆形:
1》 Html5 圆形 的度数
2》 绘制圆形
cxt.arc(x,y,radius,startAngle,endAngle,其他参数(true 逆时针 false 顺时针))
x,y 起点
radius 半径
startAngle 起点度数
endAngle 终点度数
绘制三角形
BeginPath() 开始的绘制路径
清除画布元素:
Cxt.clearRect(x,y,width,height) 清除 从(x,y) 宽高范围内的画布 元素
保存和回复canvas的状态
Cxt.save()保存状态的
Cxt.restore() 回复保存的状态,包括边框和填充色
移动坐标空间:
Translate:画布圆点移动
Translate(150,150)
原来的 0,0 ---》150,150
以上就是canvas元素的概述了,相信说了这么多大家应该也已经理解了。更多精彩请关注php中文网其它相关文章!
相关阅读:
以上是HTML5里Canvas常用的绘图技巧的详细内容。更多信息请关注PHP中文网其他相关文章!