利用canvas画直角坐标系

东成2022

于 2024-03-05 17:39:42 发布

阅读量490

点赞数 11

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/zzjnlwb/article/details/136485026

版权

先看效果图：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Canvas</title>
	<style>
	</style>
</head>

<body>
	<canvas id="canvas" style="border:1px solid #ccc"></canvas>
</body>
<script>
let canvasObj = {
	setup: function(){
		this.width = 800
		this.height = 450
		this.padding = {
			left: 50,
			right: 20,
			top: 20,
			bottom:30
		}
		this.arrowWidth = 2
	},
	init: function(id){
		this.setup()
		this.canvas = document.getElementById(id)
		this.canvas.width = this.width
		this.canvas.height = this.height
		this.ctx = this.canvas.getContext("2d")
		this.ctx.strokeStyle = "#00f"
		this.ctx.fillStyle = "#00f"
		this.drawXY()
		this.drawArrow()
		this.drawText()
	},
	// 画XY轴
	drawXY: function(){
		position = this.setPosition()
		this.ctx.beginPath();
		this.ctx.moveTo(position.yPt.startX,position.yPt.startY)
		this.ctx.lineTo(position.yPt.endX,position.yPt.endY)
		this.ctx.lineTo(position.xPt.endX,position.xPt.endY)
		this.ctx.stroke()
	},
	// 画箭头
	drawArrow: function(){
		position = this.setPosition()
		this.ctx.beginPath();
		this.ctx.moveTo(position.xArrow.startX,position.xArrow.startY)
		this.ctx.lineTo(position.xArrow.middleX,position.xArrow.middleY)
		this.ctx.lineTo(position.xArrow.endX,position.xArrow.endY)
		this.ctx.fill()
		this.ctx.beginPath();
		this.ctx.moveTo(position.yArrow.startX,position.yArrow.startY)
		this.ctx.lineTo(position.yArrow.middleX,position.yArrow.middleY)
		this.ctx.lineTo(position.yArrow.endX,position.yArrow.endY)
		this.ctx.fill()
	},
	// 写刻度和文字
	drawText: function(){		
		for(let i = 0; i<this.canvas.width/80-1; i++){
			if (i > 0)
				// 写刻度
				this.ctx.beginPath();
				this.ctx.moveTo(80*i+this.padding.left, this.canvas.height-40)
				this.ctx.lineTo(80*i+this.padding.left, this.canvas.height-30)
				this.ctx.stroke()
				// 写文字
				xText =  (0.0+i*0.8).toFixed(2) + "mm"
				this.ctx.fillText(xText, 80*i+this.padding.left-20, this.canvas.height-12)
		}
		for(let i = 0; i<(this.canvas.height-(this.padding.top + this.padding.bottom))/20; i++){
			this.ctx.beginPath();
			this.ctx.moveTo(this.padding.left, 20*i + this.padding.bottom)
			this.ctx.lineTo(this.padding.left-10, 20*i + this.padding.bottom)
			this.ctx.stroke()
			this.ctx.textAlign = "right"
				yText = (0.075+i*0.005).toFixed(3)
				this.ctx.fillText(yText, this.padding.left-15, this.canvas.height-36-20*i)
			if (i > 0){
			}	
		}
	},
	setPosition: function(){
		xPt = {
			startX: this.padding.left,
			startY: this.canvas.height - this.padding.bottom,
			endX: this.canvas.width - this.padding.right,
			endY: this.canvas.height - this.padding.bottom
		}
		yPt = {
			startX: this.padding.left,
			startY: this.padding.top,
			endX: this.padding.left,
			endY: this.canvas.height- this.padding.bottom
		}
		xArrow = {
			startX: xPt.endX,
			startY: xPt.endY - this.arrowWidth,
			middleX: xPt.endX + 10,
			middleY: xPt.endY,
			endX: xPt.endX,
			endY: xPt.endY + this.arrowWidth
		}
		yArrow = {
			startX: yPt.startX - this.arrowWidth,
			startY: yPt.startY,
			middleX: yPt.startX,
			middleY: yPt.startY - 10,
			endX: yPt.startX + this.arrowWidth,
			endY: yPt.startY
		}
		return {xPt, yPt, xArrow, yArrow}
	}

}
canvasObj.init("canvas")
</script>
</html>