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偏移量