一、canvas的概述

1、定义

• <canvas>是H5新增的标签
• canvas提供给了JavaScript绘图接口

• canvas绘图建立在坐标系上

  2、应用领域

• 炫酷特效
• 可视化数据（图表）
• 游戏
• 大型应用（地图）

• 在线系统（在线ps）

  3、canvas标签

• 属性width
• 属性height

• 方法getContext()可选参数"2d"/"webgl(3d)" 返回上下文环境

  4、绘图环境

• 该对象提供API，让JavaScript来绘制图形
  

  二、绘图基础

  1、路径的开启和闭合

• beginPath()开启路径

• closePath()关闭路径（把路径闭合）
  
  浏览器
  

  2、设置起点

• moveTo(x,y)

  3、画线

• lineTo(s,y)绘制直线

  4、描边

• strokeWidth属性设置描边线的粗细
• strokeStyle属性设置描边颜色

• stroke() 绘制
  

  5、填充

• fillStyle属性填充颜色

• fill()执行填充

  6、快速矩形

• rect(x,y,width,height)绘制矩形路径
• strokeRect(x,y,widhtn,height)描边矩形
• fillRect(x,y,width,height)填充矩形

• clearRect(x,y,width,height)清除矩形（可以用来清除屏幕）
  
  浏览器
  

  7、圆弧

• arc(x,y,radius,end,true/false)
• start表示开始的弧度（位置）0弧度是三点钟方向
• end表示结束的弧度（位置）

• 默认false表示顺时针
  
  浏览器效果
  

  8、绘制文字

• font属性设置文字的风格、大小、字体、值同css的font属性
• textAlign属性文字水平对齐方式（srart/left/right/center/end）
• textBaseline属性文字的垂直对齐方式(top/middle/bottom)

• strokeText(text,x,y)描边字