HTML5里Canvas常用的绘图技巧
canvas 用于在页面上 绘制图形
canvas概述:
html5 canvas元素和javascript配合使用在页面上绘制图形
canvas是一个画布,在画布上绘制 路径 矩形 圆形…
<canvas id width height></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 id="myCanvas" width="200" height="100">
您的浏览器不支持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元素的概述了,相信说了这么多大家应该也已经理解了。更多精彩请关注其它相关文章!
相关阅读:
以上就是HTML5里Canvas常用的绘图技巧的详细内容,更多请关注其它相关文章!
推荐阅读
-
用html5的canvas和JavaScript创建一个绘图程序的简单实例
-
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
-
详解html5 canvas常用api总结(二)--绘图API
-
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
-
HTML5 Canvas的性能提高技巧经验分享
-
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
-
整理HTML5的一些新特性与Canvas的常用属性
-
HTML5 Canvas的常用线条属性值总结
-
用html5的canvas和JavaScript创建一个绘图程序的简单实例
-
html5 canvas绘制网络字体的常用方法