canvas基础及svg

canvas

canvas的使用

1. 页面上有一个canvas标签

2. 获取到这个标签
   var canvas = decument.ElementsByTagName(“canvas”);

3. 得到一个用于在画布上绘图的环境。
   var ctx = canvas.getContext(“2d”) //目前只支持2d

4. 在CanvasRenderingContext2D 对象的原型链上编程，例如画一个扇形
   CanvasRenderingContext2D.prototype.sector = function(x,y,r,sDeg,eDeg){
   //圆心点坐标 半径 角度 起始&终止角度
   this.save();//保存当前画布的状态
   this.beginPath();//调用API接口,开始当前路径
   this.moveTo(x,y);//画笔到指定的坐标点开始绘图
   // sDeg * Math.PI / 180,eDeg * Math.PI / 180均为角度变弧度
   this.arc(x,y,r,sDeg * Math.PI / 180,eDeg * Math.PI / 180,false);//创建弧曲线 参数false表示顺时针画
   this.closePath(); //结束当前路径
   this.restore()//为画布保存最近的画布状态
   return this;
   }

5. 为画布填充颜色,并调用方法执行
   ctx.fillStyle = “red”;
   ctx.sector(250,250,200,0,90).fill(); //fill() 方法填充当前的图像（路径）。默认颜色是黑色

canvasAPI

Canvas 对象表示一个 HTML 画布元素 - <canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。可以直接在该对象上指定宽度和高度，但是，其大多数功能都可以通过 CanvasRenderingContext2D 对象获得。 这是通过 Canvas 对象的 getContext() 方法并且把直接量字符串 “2d” 作为唯一的参数传递给它而获得的。
getContext() 方法返回一个用于在画布上绘图的环境。(即返回一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中。)
CanvasRenderingContext2D 对象实现了一个画布所使用的大多数方法（提供了一组用来在画布上绘制的图形函数。可用的函数非常丰富），详见：canvasAPI

扩展网站：echarts

解决canvas在高分屏的模糊问题（canvas是位图）

根据屏幕分辨率修改canvas样式代码中的宽和高与canvas的width和height属性的比例；
如下:设置一个较大的画布，然后将canvas放入一个宽高比相同但更小的区域内

<style type="text/css">
		canvas{
			width:100px;
			height: 100px;
			border:1px solid #fff;
		}
</style>
<canvas id="can" width="200" height="200"></canvas>
<script type="text/javascript">
		var can = document.getElementById("can");
		var ctx = can.getContext("2d");

		ctx.fillRect(100,100,50,50);
</script>

SVG

矢量图：放大或缩小并不会使图片模糊
svg是一个标签

基本介绍

区别于canvas是一个标签，svg是一个标签内嵌若干个标签来绘制图形
其基本形状API参考w3school

应用场景：

1. 图表
2. 图标icon
3. 动效
4. 矢量图

path标签指令

M：类似于canvas的moveTo();
L：类似于canvas的lineTo();

H：水平方向
V：垂直方向
指令为小写时，代表相对值，相对上一个位置画多少
Z：闭合，不区分大小写

扩展：http://editor.method.ac/

在本网站绘图，会生成svg