画布

画布
画布就是一个标签，没有绘图功能，有绘图功能的是图形上下文。

获取图形上下文
getContext()

绘制步骤
获取canvas对象
var canvas = document.getElementById(‘canvas’)
获取图形上下文
var context = canvas.getContext(‘2d’)
设置绘图的样式
context.fillStyle = ‘red’ 填充色
context.strokeStyle = ‘pink’ 边框色
设置线宽
context.lineWidth=5
绘制图形
context.fillRect() 填充矩形
context.strokeRect() 边框矩形

矩形
fillRect(起点的x轴坐标，起点的y轴坐标，矩形的宽度，矩形的高度)
strokeRect(起点的x轴坐标，起点的y轴坐标，矩形的宽度，矩形的高度)
clearRect(起点的x轴坐标，起点的y轴坐标，矩形的宽度，矩形的高度)

//矩形
		window.onload=function(){
			//获取画布节点
			var canvas=document.getElementById("canvas");
			//获取上下文
			var context=canvas.getContext("2d");
			//设置样式
			context.fillStyle='red';
			// context.fillStyle='green';
			//设置线宽
			context.linewidth=5;
			//绘制图形，参数：x坐标，y坐标，矩形的宽度，矩形的高度
			context.fillRect(0,0,50,60);
			context.fillRect(200,200,50,50);

		}

圆形
创建路径
context.beginPath()

设置路径
context.arc(圆心的x轴，圆心的y轴，半径，开始的角度，结束的角度，顺时针false/逆时针true)
Math.PI 180度

关闭路径
context.closePath()
设置样式
context.fillStyle = ‘red’
context.strokeStyle = ‘pink’
绘制圆形
context.fill()实心圆
context.stroke()空心圆

	//圆
		window.onload=function(){
			//获取画布节点
			var canvas=document.getElementById("canvas");
			//获取上下文
			var context=canvas.getContext("2d");
			//设置开始路径
			context.beginPath();
			//设置圆的路径,参数：圆心的x轴，圆心的y轴，半径，开始的角度，结束的角度，绘制方向，顺时针false/逆时针true
			context.arc(200,200,100,0,Math.PI*2,false);
			//闭合路径
			context.closePath();
			//绘制的样式
			context.fillStyle='pink';
			context.strokeStyle='coral';
			context.lineWidth=10;
			//实心圆
			//context.fill();
			//空心圆
			context.stroke();		
		}

直线
开始路径
context.beginPath()
直线的开始位置
context.moveTo(起点的x轴坐标，起点的y坐标)
直线的结束位置
context.lineTo(终点的x轴坐标，终点的y坐标)
结束路径
context.closePath()
设置样式
绘制
context.fill()
context.stroke()

	//直线
	window.onload=function(){
		//获取画布节点
		var canvas=document.getElementById("canvas");
		//获取上下文
		var context=canvas.getContext("2d");
		//设置开始路径
		context.beginPath();
		//设置起点 ,参数：起点横坐标，起点纵坐标
		context.moveTo(100,100);
		//设置直线重点位置
		context.lineTo(300,300);
		context.strokeStyle="green";
		context.stroke();
	}
	

折线

	//折线
	window.onload=function(){
		//获取画布节点
		var canvas=document.getElementById("canvas");
		//获取上下文
		var context=canvas.getContext("2d");
		//设置开始路径
		context.beginPath();
		//设置起点 ,参数：起点横坐标，起点纵坐标
		context.moveTo(0,300);
		context.lineTo(150,100);
		context.moveTo(150,100);
		context.lineTo(250,300);
		context.moveTo(250,300);
		//设置直线重点位置
		context.lineTo(400,200);
		context.strokeStyle="green";
		context.stroke();
	}	

曲线
开始路径
context.benginPath()
开始的位置
context.moveTo(x,y)
控制点
两个控制点的：
context.bezierCurveTo(第一个控制点的x轴位置,第一个控制点的y轴位置,第二个控制点的x轴位置,第二个控制点的y轴位置y,结束点x轴,结束点的y轴)
如果想要上面的曲线更弯曲，就把x轴变大，y轴变小
如果想要下面的曲线更弯曲，就把x轴变小，y轴变大

一个控制点的：
context.quadraticCurveTo(控制点的x轴,控制点的y轴,结束点的x轴,结束点的y轴)
闭合
context.closePath()
绘制
context.stroke()
context.fill()
默认颜色是黑色
线宽是1

//曲线
	window.onload=function(){
		//获取画布节点
		var canvas=document.getElementById("canvas");
		//获取上下文
		var context=canvas.getContext("2d");
		//设置开始路径
		context.beginPath();
		//设置起点 ,参数：起点横坐标，起点纵坐标
		context.moveTo(0,400);
		//context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
		//context.bezierCurveTo(180,20,250,390,400,400)
		//设置直线重点位置
		context.quadraticCurveTo(200,370,200,200);
		context.moveTo(400,0);
		context.quadraticCurveTo(200,30,200,200);
		context.moveTo(0,0);
		context.quadraticCurveTo(200,30,200,200);
		context.moveTo(400,400);
		context.quadraticCurveTo(200,370,200,200);
		context.strokeStyle="green";
		context.fillStyle='red';
		//context.closePath();
		context.stroke();
	}	

渐变
线性渐变：
创建一个渐变的对象
var gradient = context.createLinearGradient(起始点x坐标，起始点y坐标，结束点x坐标，结束点y坐标)

添加渐变的颜色
gradient.addColorStop(偏移量【0-1】,‘color’)

设置填充渐变
context.fillStyle = gradient
使用渐变绘制矩形
context.fillRect(0,0,400,400)

//线性渐变
	window.onload=function(){
		//获取画布节点
		var canvas=document.getElementById("canvas");
		//获取上下文
		var context=canvas.getContext("2d");
		//创建渐变对象  起始横坐标 ，起始纵坐标 ，结束点横坐标  ，结束的纵坐标
		var gradient=context.createLinearGradient(0,0,400,400);
		//添加渐变的颜色 参数：偏移量，颜色
		gradient.addColorStop(0,'blue');
		gradient.addColorStop(0.5,'pink');

		gradient.addColorStop(0.9,'white');
		//设置渐变样式
		context.fillStyle=gradient;
		//绘制
		context.fillRect(0,0,400,400);
	}	

径向渐变
创建一个渐变的对象
var gradient = context.createRadialGradient(起始圆的圆心x坐标，y坐标，半径，结束圆的圆心x坐标，y坐标，半径)

添加渐变的颜色
gradient.addColorStop(偏移量【0-1】,‘color’)

设置填充渐变
context.fillStyle = gradient

使用渐变绘制矩形
context.fillRect(0,0,400,400)

//径向渐变
	window.onload=function(){
		//获取画布节点
		var canvas=document.getElementById("canvas");
		//获取上下文
		var context=canvas.getContext("2d");
		//创建渐变对象  起始横坐标 ，起始纵坐标 
		var gradient=context.createRadialGradient(200,200,50,200,200,200,150);
		//添加渐变的颜色 参数：偏移量，颜色
		gradient.addColorStop(0,'blue');
		gradient.addColorStop(0.5,'white');

		gradient.addColorStop(1,'pink');
		//设置渐变样式
		context.fillStyle=gradient;
		//绘制
		context.fillRect(0,0,400,400);
	}	

变形
平移
context.translate(平移的距离，平移的距离)
缩放
context.scale(缩放的备数，缩放的备数)
旋转
context.rotate(角度)

//变形
	window.onload=function(){
		//获取画布节点
		var canvas=document.getElementById("canvas");
		//获取上下文
		var context=canvas.getContext("2d");
		context.fillStyle='red';
		//平移  参数：原点平移的位置
		//context.translate(100,100);

		//缩放 参数：缩放的倍数
		context.scale(0.5,0.5);

		//旋转  参数：旋转的角度
		context.rotate(Math.PI/4);
		context.fillRect(0,0,200,200);
	}	

注意：所有的变形都是针对，坐标轴，与绘制的矩形无关

太极图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>太极图</title>
	<style>
		canvas{
			/*margin: 0 auto;*/
			/*border: 1px solid red;*/
			animation-name: move;
			animation-duration: 2s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
		}
		@keyframes move{
			0%{
				transform: rotate(0deg);
			}
			100%{
				transform: rotate(360deg);
			}
		}
	</style>
	<script>
		window.onload=function(){
			var canvas=document.getElementById('canvas');
			var context=canvas.getContext('2d');

			context.beginPath();
			context.arc(200,200,200,Math.PI/2,Math.PI*3/2);
			context.closePath();
			context.fillStyle='black';
			context.fill();

			context.beginPath();
			context.arc(200,200,200,Math.PI*3/2,Math.PI/2);
			context.closePath();
			context.fillStyle='red';
			context.fill();

			context.beginPath();
			context.arc(200,100,100,0,Math.PI*2);
			context.closePath();
			context.fillStyle='black';
			context.fill();

			context.beginPath();
			context.arc(200,300,100,0,Math.PI*2);
			context.closePath();
			context.fillStyle='red';
			context.fill();

			context.beginPath();
			context.arc(200,300,20,0,Math.PI*2);
			context.closePath();
			context.fillStyle='black';
			context.fill();

			context.beginPath();
			context.arc(200,100,20,0,Math.PI*2);
			context.closePath();
			context.fillStyle='red';
			context.fill();
		}
	</script>
</head>
<body>
	<canvas id="canvas" width="400px" height="400px"></canvas>
</body>
</html>