2015-06-09

canvas

canvas基础教程

Canvas简介：
- 概念：H5 提供的一个新的标签元素。中文：画布
  Canvas是指可以在其上面通过脚本语言（通常为js）绘制图形、图像以及制作动画的标签。
- Canvas本身不具备绘制能力，只是负责展示。
- 在浏览器不支持Canvas时，会将其当做div标签来解析。
  在IE中，会将其当做文本节点来解析
基本使用
- 创建一个画布
  1
  <canvas>在浏览器不支持canvas时，会显示这段文本。</canvas>
  - 在创建一canvas标签时，如果没有指定宽和高，默认为 300 * 150 （px）
  - 要用canvas的相关属性设置其宽和高；否则，用其他方式指定canvas的宽和高，会在默认值的基础上进行缩放。
    而在缩放时，并没有增加canvas内部的像素点的个数。
- 获取绘制工具
  1
  2
  3
  4
  // 第1步：获取相应画布
  var canvas = document.getElementById('canvasId');
  // 第2步：获取该画布的绘制工具
  var ctx = canvas.getContext('2d|WebGL');
  - getContext方法：参数为 ‘2d’ or ‘WebGL’
    2d: 获取绘制平面图形的工具
    WebGL：获取绘制立体图形的工具
  - 在课程内，只学习绘制 2d 图形
  - 绘制工具是由归属的。只有画布自己的绘制工具可以在本身上绘制图形、图像。
- 坐标系
  - 原点在canvas的左上角；
  - X轴：在原点的水平方向
  - Y轴：在原点的垂直方向
- 基本绘制工具
  - 移动笔触moveTo(x, y) x 确定点的横坐标；y 确定点的纵坐标。
  - 画线lineTo(x, y): 从当前笔触所在点连线到指定点。
- 绘制直线步骤
  - 移动笔触moveTo
  - 画线lineTo
  - 描边stroke 或填充fill
路径的概念
- ctx.beginPath(): 开启路径。
- ctx.closePath(); 闭合路径。
  - 将图形的起始点与终止点进行连线，形成一个封闭的图形
  - 会自动处理封闭图形的锯齿
- 注意：
  1. 只有在需要开始新路径时，调用beginPath方法；
    在需要将图形闭合，形成封闭的图形，那么就可以调用closePath方法。
  2. 这两个方法并不一定要成对出现。
- 除了stroke-或fill-开头的方法之外，都会绘制路径。此时需要手动调用stroke或fill方法。
线性相关的属性
- lineWidth：设置线宽
- strokeStyle：设置线条颜色，值可以为 16进制、颜色字符串、rgb、rgba、渐变色
- fillStyle: 设置填充颜色
- lineCap ：设置线段两端的样式
  - ‘butt’: 默认
  - ‘round’: 设置线段两端为突出的圆角图形
  - ‘square’:设置线段两端为突出的方形图形
- lineJoin: 设置线段相交点的样式
  - ‘round’ ：圆角样式
  - ‘bevel’ : 平角样式
  - ‘miter’ : 尖角样式(默认样式).
非零环绕原则
- 目的：确定某一区域是否需要填充。
- 描述：定义计数默认为0，从当前区域选取任意点，然后从该点到整个图形外部绘制一条射线。
  观察和这条射线相交的所有线段。
  如果该相交的线段是顺时针穿过这条射线，那么计数 + 1；如果是逆时针穿过，那么计数就 - 1；
  如果计数为 0，那么就不填充该区域；
  如果计数非 0 ，那么就填充该区域。
- 练习：绘制空心矩形
- 总结：从左到右穿出或从上至下穿出，那么就是顺时针。计数 + 1；
```
否则， 计数 - 1；
```
奇-偶原则
- 目的：同上
- 描述：就看相交线的个数，如果为奇数，就填充；否则就不填充。

两个绘制小案例

纵向的颜色渐变


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绘制纵向的颜色渐变</title>
	<style>
		canvas {
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="600" height="400"></canvas>
</body>
<script>
	
	var canvas = document.getElementById('canvas'),
		ctx = canvas.getContext('2d');
	for( var i = 0; i <= 255; i++){
		ctx.strokeStyle = 'rgb(0, '+ i +', 0)';
		ctx.beginPath();
		ctx.moveTo(50, 50 + i);
		ctx.lineTo(390, 50 + i);
		ctx.stroke();
	}
</script>
</html>

绘制坐标系


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绘制坐标系</title>
	<style>
		canvas {
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="600" height="400"></canvas>
</body>
<script>
	function toAngle( radian ) {
		return 180 * radian / Math.PI;
	}
	function toRadian( angle ) {
		return Math.PI * angle / 180;
	}
	var canvas = document.getElementById('canvas'),
		ctx = canvas.getContext('2d');
	
	var canvasWidth = canvas.width,
		canvasHeight = canvas.height;
	var padding = 20;
	var x0, y0;
	var arrowWidth = 16,
		arrowHeight = 16;
	x0 = padding;
	y0 = canvasHeight - padding;

	ctx.moveTo(padding, padding);
	ctx.lineTo(x0, y0);
	ctx.lineTo(canvasWidth - padding, y0);
	ctx.stroke();
	// 绘制x轴箭头
	ctx.beginPath();
	ctx.moveTo(canvasWidth - padding, y0);
	ctx.lineTo(canvasWidth - padding - arrowHeight, y0 - arrowWidth / 2);
	ctx.lineTo(canvasWidth - padding - arrowHeight * .5, y0);
	ctx.lineTo(canvasWidth - padding - arrowHeight, y0 + arrowWidth / 2);
	ctx.closePath();
	ctx.fill();

	 // 绘制y轴箭头
	 ctx.beginPath();
	 ctx.moveTo(padding, padding);
	 ctx.lineTo(padding + arrowWidth * .5, padding + arrowHeight);
	 ctx.lineTo(padding, padding + arrowHeight * .5);
	 ctx.lineTo(padding - arrowWidth / 2, padding + arrowHeight);
	 ctx.fill();
</script>
</html>