百度T7 课程 canvas 学习 4--- 面向对象画折现图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网格</title>
	<style>
		#c1{
			border:1px solid black;
		}

	</style>

	<script>

			function DrawGrid(space,everPadding,ctx){
				this.space = space;
				this.everPadding = everPadding;
				this.ctx =ctx || document.getElementById('c1').getContext('2d');
				this.canvasHeight = ctx.canvas.height;
				this.canvasWidth = ctx.canvas.width;
				this.x0 = this.everPadding;
				this.yo = this.canvasHeight -this.everPadding
				this.pointRadius = 4;
			}
		

			DrawGrid.prototype.drawPoint = function(points){
				var points = points;

				var rPoints = [];
				//1 , 第一步把所有的点画出来， 
					for(let i =0; i<points.length;i++){
						// 拿到具体的坐标
						var px = points[i].x;
						var py = points[i].y;
						// 转换坐标！当你思维不清楚，画个图，就清楚了，图形能够帮助思维！
					
						// 100,100
						// 真实坐标
						var rx = px + this.x0;
						var ry = this.yo - py;
						rPoints.push({
							x:rx,
							y:ry
						})
						console.log(rx,ry)
						// 行吧，下面知道组表就好画了！
						// 求出四个顶点的坐标：
						var pointRadius = this.pointRadius
						this.ctx.beginPath()	
						this.ctx.moveTo(rx-this.pointRadius,ry-this.pointRadius)
						this.ctx.lineTo(rx+this.pointRadius,ry-this.pointRadius)
						this.ctx.lineTo(rx+this.pointRadius,ry+this.pointRadius)
						this.ctx.lineTo(rx-this.pointRadius,ry+this.pointRadius)
						this.ctx.fillStyle='red'
						this.ctx.fill();
					}

				//2第二步就是联系起来
					// console.log(rPoints)

					this.ctx.beginPath()
					this.ctx.moveTo(this.x0,this.yo)
					for(let i =0;i<rPoints.length;i++){
						this.ctx.lineTo(rPoints[i].x,rPoints[i].y)
					}

					this.ctx.strokeStyle='red'
					this.ctx.stroke()
					


			}


			DrawGrid.prototype.drawAxias = function(){

					// 下面是画那个坐标！
				
			
				// 起点(坐标原点)
				var x0 = this.everPadding;
				var yo = this.canvasHeight -this.everPadding
				// x 轴，终点：
				var x1 = this.canvasWidth-this.everPadding;				
				// 竖着方向：
				
				// 画着再说：
				this.ctx.beginPath();
				this.ctx.moveTo(x0,yo)
				this.ctx.lineTo(x1,yo)
				this.ctx.lineTo(x1-this.space,yo-this.space)
				this.ctx.lineTo(x1-this.space,yo+this.space)
				this.ctx.lineTo(x1,yo)
				this.ctx.strokeStyle="blcak"
				this.ctx.fillStyle="blcak"
				this.ctx.lineWidth=4;
				this.ctx.stroke()
				this.ctx.fill()

				this.ctx.beginPath()
				this.ctx.moveTo(x0,yo)
				this.ctx.lineTo(x0,this.everPadding)
				this.ctx.lineTo(x0-this.space,this.everPadding+this.space)
				this.ctx.lineTo(x0+this.space,this.everPadding+this.space)
				this.ctx.lineTo(x0,this.everPadding)
				this.ctx.strokeStyle="blcak"
				this.ctx.fillStyle="blcak"
				this.ctx.lineWidth=4;
				this.ctx.stroke()
				this.ctx.fill()
			}

			

			DrawGrid.prototype.drawGrid = function(){
					// 当你记不住api 的时候，就打印出来看看！
				var lines = Math.floor(this.canvasHeight/this.space)
				var cols = Math.floor(this.canvasWidth/this.space)
				for(let i = 0;i<lines;i++){
					this.ctx.beginPath()
					this.ctx.moveTo(0,this.space*i-0.5)
					this.ctx.lineTo(this.canvasWidth,this.space*i-0.5)
					this.ctx.strokeStyle='#aaa'
					this.ctx.stroke();
				}
				// 画第二个竖着的格子！
			
				for(let j = 0; j<cols;j++){
					this.ctx.beginPath();
					this.ctx.moveTo(this.space*j-0.5,0)
					this.ctx.lineTo(this.space*j-0.5,this.canvasHeight)
					this.ctx.strokeStyle="#aaa"
					this.ctx.stroke()
				}
			}


			window.onload = function(){
				var oCanvas = document.getElementById('c1')
				var gd = oCanvas.getContext('2d')	
				var dG = new DrawGrid(20,40,gd);
				dG.drawGrid();
				dG.drawAxias();
				var points = [{x:100,y:100},{x:125,y:125},{x:150,y:90},{x:250,y:400}]
				dG.drawPoint(points)	



			}				
	</script>

</head>
<body>
	
	
		<canvas id="c1" width="500"  height="500"></canvas>


</body>
</html>
效果：
总结，就两条
对象包括，属性和方法，基本的java 类的概念！
百度T7 课程 canvas 学习 4--- 面向对象画折现图

猜你喜欢
