html5画布

web前端中的绘图技术

canvas 绘制2d图形 像素图 放大失真 适合用js去绘图动态的图像
svg 矢量图 放大不会失真 只适合大量贴图
WEBGL 功能强大的3d绘图技术 不是HTML5的标准技术

1. 需要用到绘图的地方

绘制统计图表 实时的走势图
验证码 随机内容的图片
在线画板
html5游戏

大数据可视化

• moveTo(x,y) 线条的起点
• lineTo(x,y) 线条的终点

线端样式

• lineCap 加一个帽子

  1. round 将线条的端点变得圆角化
  2. butt 默认样式
  3. aquare 往线端两边加上一个小方块

• lineJoin 两线相交时的样式

  1. round
  2. bevel 一刀切
  3. miter 设置成尖锐的

• rect(x,y,w,h) 画一个矩形

• strokeRect()

• fillRect()

• 改变画笔的样式的属性

1. lineWidth 线条宽度
2. fillStyle 填充样式
3. strokeStyle 描边样式

所有的图形：矩形 圆形 文本 图片

box-shadow:x y

• shadowColor 颜色
• shadowBlur 模糊距离
• shadowOffsetX x偏移量
• shadowOffsetY y偏移量

圆：360
半圆：180

• arc(x,y,r,起始弧度,结束的弧度,方向(0顺时针,1逆时针))

arcTo(ax,ay,bx,by,弧度大小)

bx,by 不会实际绘制出来 只用来做指定方向的参数

• strokeText(’’);
• fillText()
• font 必须同时设置字体大小和字体类型 不然会失效 ‘20px 微软雅黑’;
• textbaseline
  1. hanging 悬挂对齐
  2. middle 居中
  3. bottom 以坐标线为底部对齐
• textAlign 文本的对齐方式
  1. left 默认的对齐方式 以坐标点为文本的最左边的边界
  2. right 以坐标点为文本的最右边的边界
  3. center 以坐标点为文本的中间值进行对齐