function draw(){
	// 声明使用canvas
	var canvas = document.getElementById('box');
	// 使用平面2d绘制
	var context = canvas.getContext('2d');


	context.fillStyle = "#000"; // 填充颜色
	context.strokeStyle = "#f60"; // 描边颜色
	context.lineWidth = 5; //描边粗细

	// context.fillRect(0,0,400,300);  // 绘制矩形
	// context.clearRect(60,60,100,100);  //擦除部分
	// context.strokeRect(50,50,180,120);  //绘制边框
	// context.strokeRect(100,100,180,120);

	// 绘制三角形（填充）
	// context.beginPath();
	// context.moveTo(75,50); //设置起点
	// context.lineTo(100,75);
	// context.lineTo(100,25);
	// context.fill(); //填充

	// 绘制三角形（描边）
	// moveTo(x, y): 设置起点位置(坐标值)
	// lineTo(x, y): 设置直线终点位置(坐标值)


	// context.beginPath();
	// context.moveTo(100,50); //设置起点
	// context.lineTo(130,75);
	// context.lineTo(130,25);
	// context.closePath(); //闭合路径
	// context.lineCap = 'round'; //线的端头为圆形边角
	// context.lineJoin = "round"; //交叉地方为圆形边角
	// context.stroke(); //描边
	// context.moveTo(50, 50);
	// context.lineTo(100, 100);
	// context.closePath();
	// context.stroke();

	// var n = 0;
	// var dx = 150;
	// var dy = 150;
	// var s = 100;
	// context.beginPath();
	// context.fillStyle = 'rgb(100, 255, 100)'; // 填充颜色
	// context.strokeStyle = 'rgb(0, 0, 100)'; // 描边颜色
	// var x = Math.sin(0); 
	// var y = Math.cos(0); 

	// Math.sin(x);// x的正玄值，返回值在-1 到 1之间
	// Math.cos(x);// x的余玄值，返回值在-1 到 1之间
	// 这两个函数中的X都是指的是 弧度 不是 角度
	// 弧度计算公式 2 * PI / 360 
	// 30度的弧度 2 * PI / 360 * 30

	// 圆上点的坐标值计算公式
	// 栗子 圆心坐标（a,b）  半径 r
	// 坐标 X = a + Math.sin(2*Math.PI / 360) * r;
	// 坐标 Y = b + Math.sin(2*Math.PI / 360) * r;


	// var dig = Math.PI / 15 * 8;
	// for (var i = 0; i < 30; i++) {
	// 	var x = Math.sin(i * dig);
	// 	var y = Math.cos(i * dig);
	// 	context.lineTo( dx + x * s, dy + y * s);
	// }
	// context.closePath();
	// context.fill();
	// context.stroke();




	// 圆及弧线的绘制
	// context.beginPath();

	// context.arc(x, y, radius, startAngle, endAngle, anticlockise);
	// 六个参数
		// x：x为为绘制圆形的起点坐标;
		// y：y为为绘制圆形的终点坐标;
		// (x,y) 圆心位置

		// radius：绘制圆形半径;
		// startAngle：圆形开始角度;
		// endAngle：圆形结束角度;
		// anticlockise：圆形顺时针（true） 或者 逆时针（false）

	// 圆的绘制（圆心，半径，起始值，终点值）
	// Math.PI*2 代表绘制圆的弧度（*1半圆  *1.5四分之三圆）
	// true，false 代表绘制的方向（顺时针，逆时针）
	// context.arc(350,100,50,0,Math.PI*2,true);
	// context.moveTo(315,100);
	// context.arc(350,100,35,0,Math.PI,false);
	// context.moveTo(335,80);
	// context.arc(330,80,5,0,Math.PI*2,true);
	// context.moveTo(375,80);
	// context.arc(370,80,5,0,Math.PI*2,true);
	// context.stroke();

	// context.arc(100, 100, 50, 10, 120, true);
	// context.stroke();
	// context.fill();
	// var n = 0;
	// for (var i = 0; i < 10; i++) {
	// 	context.beginPath();
	// 	context.arc(25*i, 25*i, i*10, 0, Math.PI*2, true);
	// 	context.closePath(); // 闭合路劲，结束绘制

	// 	// context.fillStyle = 'rgba(255, 0, 0, 0.25)';
	// 	// context.fill();

	// 	context.strokeStyle = 'rgba(255, 0, 0, 0.25)';
	// 	context.stroke();

	// }



	// -----------------------------------------------------------------------------
	// 渐变属性 

	// 线性渐变 圆形绘制
	// context.beginPath(); // 声明绘制开始

	// context.arc(100, 100, 50, 0, Math.PI*2, true); // 绘制圆的参数
	// context.closePath(); // 结束绘制

	// var g1 = context.createLinearGradient(100, 50, 100, 150); // 线性渐变的起点和终点
	// g1.addColorStop(0, 'rgb(255, 255, 0)'); // 渐变的起点的颜色
	// g1.addColorStop(0.5, 'rgb(255, 0, 255)'); // 渐变的中间的颜色
	// g1.addColorStop(1, 'rgb(0, 255, 255)'); // 渐变的终点的颜色

	// context.fillStyle = g1; // 设置填充颜色（渐变）
	// context.fill(); // 填充颜色


	// // 径向渐变 圆形绘制
	// context.beginPath(); // 声明绘制开始

	// context.arc(200, 200, 50, 0, Math.PI*2, true); // 绘制圆的参数
	// context.closePath(); // 结束绘制

	// var g2 = context.createRadialGradient(200, 200, 0, 200, 200, 80); // 径向渐变起点的圆心和半径 + 终点的圆心和半径  
	// g2.addColorStop(0, 'rgb(255, 255, 0)'); // 渐变的起点的颜色
	// // g2.addColorStop(0.5, 'rgb(255, 0, 255)'); // 渐变的中间的颜色
	// g2.addColorStop(1, 'rgb(0, 255, 255)'); // 渐变的终点的颜色

	// context.fillStyle = g2; // 设置填充颜色（渐变）
	// context.fill(); // 填充颜色



	// -----------------------------------------------------------------------------
	// 变形图形 

	// 1、平移  2、放大  3、旋转
	// context.beginPath();
	// context.arc(150, 150, 100, 0, Math.PI*2, true);
	// context.closePath();

	// context.translate(200, 50); // 平移坐标值	
	// context.fillStyle = 'rgba(255, 0, 0, 0.25)';


	// for (var i = 0; i < 50; i++) {
	// 	context.fillRect(0, 0, 100, 50);
	// 	context.translate(25, 25); // 平移坐标值
	// 	context.scale(0.95, 0.95); // 放大x的倍数,和y的倍数
	// 	context.rotate(Math.PI / 10); // 旋转角度
	// }

	// 小案例旋转的五角星
	context.translate(200, 100);
	// context.fillStyle = 'rgba(255, 0, 0, 0.25)';
	context.strokeStyle = 'rgba(255, 0, 0, 0.25)'; // 描边颜色
	context.lineWidth = 2;  // 描边粗细

	for (var i = 0; i < 50; i++) {
		context.translate(25, 25);
		context.scale(0.95, 0.95);
		context.rotate(Math.PI / 10);
		creeat5Star(context);
		// context.fill();
		context.stroke();
	}

	creeat5Star(context);

	function creeat5Star(context) {
		var n = 0;
		var dx = 100;
		var dy = 0;
		var s = 50;
		context.beginPath();
		context.fillStyle = 'rgba(255, 0, 0, 0.25)';
		var x = Math.sin(0);
		var y = Math.cos(0);
		var dig = Math.PI / 5 * 4;
		for (var i = 0; i < 5; i++) {
			var x = Math.sin(i * dig); 
			var y = Math.cos(i * dig); 
			context.lineTo(dx + x * s, dy + y * s);
		}
		context.closePath();
	}

	// 更多了解 p138


}