网页中的两种绘图技术:1、SVG矢量图 2、canvas
SVG矢量图:就是用一个标签代码来画图
canvas :画布,h5新出的技术,用js来画图
它们都是代码,占用很小的内存;但是img是图片,是图片编码。
注意:画布的宽度和高度要用canvas的属性设置,不要直接在css里面定义;
canvas本身没有任何外观,只是在文档中创建了一个画板。
画布的坐标:画布以浏览器可视区域左上角(0, 0)为坐标原点;往右为X轴的坐标不断增大; 往下为Y轴的坐标不断增大。
canvas如何作图?
1、写一个canvas标签
2、获取创建的canvas元素
3、canvas点getContext("2d")得到一个“绘制上下文”对象
4、这个对象调用相应的方法,画线或着色。
小例子:
<canvas id="cav" width="400" height="400"></canvas>
<script>
var cav=document.querySelector("#cav")
var cxt=cav.getContext("2d")
cxt.moveTo(200,200)//确定线段起点
cxt.lineTo(300,300)//将上面定义的线段起点和这里指定的新的点连接起来
cxt.moveTo(300,300)
cxt.lineTo(400,200)
cxt.strokeStyle="yellow" //改变线段颜色
cxt.lineWidth=10 //改变线段粗细
cxt.stroke() //绘制图片
</script>
页面效果:
需要补充一点: 关于lineTo()这个方法,是将moveTo()设置的起点与当前lineTo的点连接起来;但是当没有设置moveTo()时,lineTo()会将上条线段的终点当作起点,如果没有上一次的终点,就没有这一次的起点。
canvas适用于哪些场景?
双屏互动 大数据页面 游戏 广告 特效.......