网页中常用的两种绘图技术，用canvas绘图，绘制出一个三角形，矩形，柱状图，扇形图

网页中常用的两种绘图技术

SVG矢量图: 就是用标签代码来画图
canvas:是h5出技术,用来js来画图
它们两种都是代码
img也是图片,它是图片编码
在浏览器中，如果有一个自定义标签（不是浏览器定制的标签），那么浏览器就会当做文本标签识别渲染

用canvas绘图

<style type="text/css">
	#box {
    
	border: 1px black solid;
}
</style>
// canvas元素自己属于图片 因此图片有自己的编码宽高，属性来设置宽高
<canvas id="box" width="600px" height="600px">
 如果不认识我，就直接显示文字，认识就解析
</canvas>

<script type="text/javascript">
	// 获取标签
	var canvas = document.querySelector("#box");
	// 定义是绘图的内容时2d还是3d
	var pen = canvas.getContext("2d");
	// 画笔的起点位置
	pen.moveTo(200, 200);
	// 画笔的的终点位置，从起点到终点画出一条直线
	pen.lineTo(400, 400);
	// 绘制在页面上，不如不写这个就看不到效果
	pen.stroke();
</script>

绘制出一个三角形

<style type="text/css">
	#box {
    
		border: 1px black solid;
	}
</style>

<canvas id="box" width="600px" height="600px">
	如果不认识我，就直接显示文字，认识就解析
</canvas>

<script type="text/javascript">
	var canvas = document.querySelector("#box");
	// 我写的就是上层代码，调用的函数或者方法是底层，通过对象来调用的函数或方法的这个对象就叫上下文对象
	var ctx = canvas.getContext("2d");
	// 线条宽度
	ctx.lineWidth = 10;
	// 线条颜色
	ctx.strokeStyle = "red";
	
	ctx.moveTo(100, 100);
	// 会把上一次的终点作为这一次的起点，没有上一次的终点就没有这一次的起点
	ctx.lineTo(300, 300);
	
	ctx.moveTo(400, 100);
	ctx.lineTo(100, 100);
	
	ctx.moveTo(400, 100);
	ctx.lineTo(300, 300);
	
	ctx.stroke();
	
</script>

绘制一个矩形

<style type="text/css">
	#box {
    
		border: 1px black solid;
	}
</style>

<canvas id="box" width="600px" height="600px">
	如果不认识我，就直接显示文字，认识就解析
</canvas>

<script type="text/javascript">
	var canvas = document.querySelector("#box");
	var ctx = canvas.getContext("2d");
	// 绘制矩形
	// x, y, 宽, 高
	ctx.rect(200, 100, 300, 400);
	ctx.stroke();
	ctx.fillStyle = "skyblue";
	// 填充，把闭合轨迹中间填充上颜色，默认黑色
	ctx.fill();
	
</script>

绘制柱状图

<style type="text/css">
	#box {
    
		border: 1px black solid;
	}
</style>
<canvas id="box" width="600px" height="600px">
如果不认识我，就直接显示文字，认识就解析
</canvas>
<script type="text/javascript">
	var canvas = document.querySelector("#box");
	var ctx = canvas.getContext("2d");
	var arr = [1000, 304, 120, 607, 899, 999];
	ctx.moveTo(50, 500);
	ctx.moveTo(580, 500);
	ctx.stroke();
	let h = 450/Math.max(...arr);
	for(var i = 0; i < arr.length; i++) {
    
		// 填充，把闭合轨迹中间填充上颜色，默认黑色
		ctx.fillStyle = "skyblue";
		ctx.fillRect(100+i*70, 500-h*arr[i], 50 ,h*arr[i] );
}
</script>	

绘制扇形图

<style type="text/css">
	#box {
    
		border: 1px black solid;
	}
</style>

<canvas id="box" width="600px" height="600px">
	如果不认识我，就直接显示文字，认识就解析
</canvas>

<script type="text/javascript">
	var canvas = document.querySelector("#box");
	var ctx = canvas.getContext("2d");
	var arr = [
		{
    
			name:"car",
			money:2000
		},{
    
			name:"hcar",
			money:1000
		},{
    
			name:"ecar",
			money:600
		},{
    
			name:"carr",
			money:400
		},{
    
			name:"cary",
			money:1200
		},
	];
	arr.total = 0;
	for (var i = 0; i < arr.length; i++) {
    
		arr.total = arr.total + arr[i].money
	}
	
	var start = 0;
	var deg = Math.PI / 180;
	arr.forEach((el) => {
    
		ctx.beginPath();
		var r = parseInt(Math.random()*255);
		var g = parseInt(Math.random()*255);
		var b = parseInt(Math.random()*255);
		ctx.fillStyle = `rgb(${
      r},${
      g},${
      b})`;
		var n = (el.money / arr.total) * 360;
		ctx.arc(300, 300, 200, start * deg, (start + n) * deg);
		ctx.lineTo(300, 300);
		start = start + n;
		ctx.fill();
		ctx.stroke();
	})
</script>