H5新特性-- 网页绘图(笔记)

网页绘图表现力是超强的.
如
特效:视频网站弹幕,雪花漂落,弹出式广告…
功能:电影网站定做,销售统计图,天气,金融…
游戏:跳一跳,休闲,故事…
网页绘制开发方式:
功能简单.图形复杂-- 自己开发
图形复杂,功能简单-- 第三方库(放过自己,太伤身体)
d3 \ echartsjs \ cocos
以上三个超级棒的第三方库,其中echarts是百度的,所以文档做的nice.cocos是一个专业的游戏引擎,

三种技术
1:canvas(最流行) 像素点组成的2D的 位图图像(颜色较细).(不能放大缩小,否则模糊)
2:svg用线段组成的2D 矢量图图像 (不会失真)(颜色单调)
3:webGL:3D位图 不是h5.

Canvas

这是画布以及原点的概念.x和y轴的方向需要注意一下

干活步骤:

1. 通过标签获取画布
   <canvas id="c3" ></canvas>

• canvas要求必须制定宽高,可以用js,不能用css指定

2. 通过js获取画布元素
   var c3 = docoment.getElementById('c3')
3. 通过js获取画布元素画笔对象
   var ctx = c3.getContext('2d')

• 2d:平面图形
• Context:上下文对象(画笔对象)

矩形的绘制:

4. 绘制空心矩形
   ctx.strokeRect(x,y,w,h)
   x,y 坐标
   w,h 宽高
5. 绘制实心矩形
   ctx.fillRect(x,y,w,h)
6. 清空矩形范围内所有图形
   ctx.clearRect(x,y,w,h)
7. 设置空心矩形样式
   ctx.strokeStyle = '#0f0'
8. 设置实心矩形样式
   ctx.fillStyle = '#00f'
9. ctx.strokeText(str,x,y); 空心文字
   str 字符串 x,y 左上角位置(坑)
10. ctx.fillText(str,x,y); 实心文字
    ctx.font = “39px SimHei”; 39号字 简体中文黑体字
11. 设置文本基线
    ctx.textBaseline = "alphabetic"
    [top,
    alphabetic, 默认值
    bottom]

路径

路径:path 由多个坐标点组成任意图形，图形本身不可见
可用"描边" "填充"实现

1. ctx.beginPath(); 开始一条新路径(上一条路径结束)
2. ctx.moveTo(x,y); 将画笔移动到指定点
3. ctx.lineTo(x,y); 从当前点到指定点画一条直线
4. ctx.stroke(); 描边
5. ctx.fill(); 填充
6. ctx.arc(cx,cy,r,start,end); 绘制圆拱形
   -cx cy 圆心
   -r半径
   -start 起始角度(默认3点方向)
   -end 结束角度
   #角度不是生活角度(0 ~ 360) 弧度 (0 ~ 2PI)
   #35角度Math.PI/180=弧度