简单了解Canvas

前沿

canvas最早由 Apple 引入 Webkit，用于Mac OS X 的 Dashboard，后来又在 Safari 和 Goole Chrome 被实现。
基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。
<canvas> 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。

什么是Canvas?

HTML5的canvas元素使用JavaScript在网页上绘制图像。
画布是一个矩形区域，您可以控制每一像素。
canvas拥有很多种绘制路径、矩形、圆形、字符、以及添加图像的方法。

创建Canvas元素

向HTML5页面添加canvas元素。
规定元素的id、宽度和高度:

	<canvas id="myCanvas" width="500" height="500"></canvas>	

Canvas坐标系

获取canvas

	var canvas = document.querySelector('#myCanvas')
	// 获取2D渲染上下文
	var context = canvas.getContext('2d')

绘制矩形

	// 创建一个矩形需要输入4个参数
	// 前两个参数是矩形原点(左上角)的(x, y)坐标值 后面两个参数是矩形的宽度和高度
	// context.fillRect(x, y, width, height)
	// fillRect 绘制一个矩形并给它填充颜色
	context.fillRect(20, 20, 100, 100) 
	// strokeRect 绘制一个矩形并给它绘制边框 也就是用线条绘制出矩形的轮廓
	context.strokeRect(20, 20, 100, 100) 

注意：如果你绘制的图形原点位于canvas元素之外 将无法显示到屏幕上 只有当图形的原点或某些部分位于canvas元素之内时 才可见

绘制线条

	  ctx.beginPath()   // 开始路径
	  ctx.moveTo(40, 40) // 设置路径原点
	  ctx.lineTo(40, 240) // 设置路径终点
	  // ctx.lineTo(240, 240) // 也可以绘制出斜线
	  ctx.closePath() // 结束路径
	  ctx.stroke() // 绘制出轮廓
	  // ctx.fill() // 也可以填充 

绘制圆形

canvas实际上并没有专门绘制圆形的方法 但是有一个方法可以绘制弧形 圆弧实际上就是圆形的组成部分---首尾相连的圆弧就是圆形

	  ctx.beginPath() // 开始路径
	  /**
	   * 创建一个圆弧需要6个参数：
	   * 圆弧的x, y坐标值(圆心)
	   * 圆弧半径
	   * 开始角度
	   * 结束角度
	   * 和一个布尔值(为true 圆弧按逆时针方向绘制 为false 反之)
	   * ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)
	   * 在canvas中 一条弧线是由一条曲线定义的 它从原点(x, y)距离为一个半径且角度为开始角度的位置开始 
	   * 这条路径最后停在离原点(x, y)一个半径且角度为结束角度的位置上
	   * **/
	   ctx.arc(100, 100, 50, 0, Math.PI * 2, false) // 绘制一个圆
	  // ctx.arc(100, 100, 50, 0, Math.PI, false) // 绘制半个圆
	   ctx.closePath() // 结束路径
	   ctx.stroke() // 绘制出轮廓
	  // ctx.fill() // 也可以填充

Canvas中的角度是以弧度而不是角度为单位的 例：360度(完整的圆)是2π(PI的 2倍)弧度
javascript将角度换算成弧度的公式:

	var = degrees = 1 // 1度
	var = radians = degrees * (Math.PI / 180) // 0.0175弧度

参考文档

• w3cshool
• Canvas API