html5新增标签：canvas

Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。Canvas 对象表示一个 HTML 画布元素 -。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

在html部分写如下代码，建议在标签之间加上一句“ 您的浏览器不支持canvas”，如果浏览器支持则之间渲染canvas，不会显示这句话。

  您的浏览器不支持canvas

接下来，就都是在js中写的脚本了。

//first,获取画布
var canvas = document.querySelector("#canvas");
//second,获取绘制环境
var ctx = canvas.getContext("2d");

canvas的重要方法

• moveTo(x,y)设置绘制线段的起点（用于表示一条新线的绘制）。
• lineTo(x,y)绘制线段到制定点，如果上第一条线，可以不使用moveTo，直接使用lineTo，否则建议一律使用moveTo。
• stroke() 描边（绘制）。
• closePath()闭合路径，将当前正在绘制的路径闭合
• fill() 填充
• fillstyle 设置填充样式，同strokestyle
• beginPath() 开始一条新路径的绘制
• beginPath 与 closePath没有一丁点关系
• fillRect(x,y,w,h)填充矩形
• strokeRect(x,y,w,h)描边矩形
• clearRect(x,y,w,h)擦除 指定的区域
• rect(x,y,w,h)定义矩形路径
• arc(cx,cy,radius,startAngle,endAngle[,是否逆时针])
  绘制圆弧
  cx | cy 圆心坐标
  radius 半径
  startRadian | endRadian 开始 | 结束 弧度
  -fillText(string,x,y)填充文字
  -strokeText(string,x,y)描边文字
  文字属性：
  font设置字体样式
  textAlign设置文字水平对齐方式
  textBaseline设置文字垂直对齐方式

cavas的常用属性

• lineWidth 设置线宽 ctx.lineWidth =10
• strokeStyle 设置描边样式 接收所有颜色类型
• lineJoin 设置线段交汇处的样式
  bevel斜角
  round圆角
  miter尖角（默认）
• lineCap设置线帽（只在断点处有效）butt无 默认 round 圆帽 square方帽

使用canvas做动画思路

通过定时器不断擦除，可以使用clearRect(x,y,w,h)方法。

入门canvas的例子

其中写了一个table坐标，帮助理解canvas的坐标点。

您的浏览器不支持canvas