LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

[点晴永久免费OA]html5在canvas上绘制坐标轴

admin
2022年10月21日 11:47 本文热度 1030
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#canvas {
border: thin solid red;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//水平标尺与canvas的距离
var HORIZONTAL_AXIS_MARGIN = 50;
//竖直标尺与canvas的距离
var VERTICAL_AXIS_MARGIN = 50;
//标尺起点
var AXIS_ORIGIN = {
x: HORIZONTAL_AXIS_MARGIN,
y: canvas.height - VERTICAL_AXIS_MARGIN
};
//坐标的顶部
var AXIS_TOP = VERTICAL_AXIS_MARGIN;
//坐标的长度
var AXIS_RIGHT = canvas.width - HORIZONTAL_AXIS_MARGIN;
//小标记的间隔
var HORIZONTAL_TICK_SPACING = 10;
var VERTICAL_TICK_SPACING = 10;
//坐标标记的范围
var AXIS_WIDTH = AXIS_RIGHT - AXIS_ORIGIN.x;
var AXIS_HEIGHT = AXIS_ORIGIN.y - AXIS_TOP;
//纵向标记数值
var NUM_VERTICAL_TICKS = AXIS_HEIGHT / VERTICAL_TICK_SPACING;
//横向标记数值
var NUM_HORIZONTAL_TICKS = AXIS_WIDTH / HORIZONTAL_TICK_SPACING;
var TICK_WIDTH = 10;
//标牌和坐标轴之间的距离
var SPACE_BETWEEN_ABELS_AND_AXIS = 20;
 
function drawAxes() {
context.save();
context.lineWidth = 1.0;
context.fillStyle = "rgba(100, 140, 230, 0.8)";
context.strokeStyle = "navy";
drawHorizontalAxis();
drawVerticalAxis();
context.lineWidth = 0.5;
context.strokeStyle = "navy";
context.strokeStyle = "darkred";
drawVerticalAxisTicks();
drawHorizontalAxisTicks();
context.restore();
}
//绘制水平的小标
function drawHorizontalAxisTicks() {
var deltaY;
for (var i = 1; i < NUM_HORIZONTAL_TICKS; i++) {
context.beginPath();
//判断画的是大坐标还是短坐标
if (i % 5 == 0) {
deltaY = TICK_WIDTH;
} else {
deltaY = TICK_WIDTH / 2
}
context.moveTo(AXIS_ORIGIN.x + i * HORIZONTAL_TICK_SPACING,
AXIS_ORIGIN.y - deltaY);
context.lineTo(AXIS_ORIGIN.x + i * HORIZONTAL_TICK_SPACING,
AXIS_ORIGIN.y + deltaY);
context.stroke();
}
}
//绘制数值的小标
function drawVerticalAxisTicks() {
var deltaX;
for (var i = 1; i < NUM_VERTICAL_TICKS; i++) {
context.beginPath();
if (i % 5 === 0) {
deltaX = TICK_WIDTH;
} else {
deltaX = TICK_WIDTH / 2;
}
context.moveTo(AXIS_ORIGIN.x - deltaX,
AXIS_ORIGIN.y - i * VERTICAL_TICK_SPACING);
context.lineTo(AXIS_ORIGIN.x + deltaX,
AXIS_ORIGIN.y - i * VERTICAL_TICK_SPACING);
context.stroke();
}
}

//画竖直线
function drawVerticalAxis() {
context.beginPath();
context.moveTo(AXIS_ORIGIN.x, AXIS_ORIGIN.y);
context.lineTo(AXIS_ORIGIN.x, AXIS_TOP);
context.stroke();
}
//画水平线
function drawHorizontalAxis() {
context.beginPath();
context.moveTo(AXIS_ORIGIN.x, AXIS_ORIGIN.y);
context.lineTo(AXIS_RIGHT, AXIS_ORIGIN.y);
context.stroke();
}
//绘制标注
function drawAxisLabels() {
context.fillStyle = "blue";
drawHorizontalAxisLabels();
drawVerticalAxisLabels();
}
//绘制竖直轴标注
function drawVerticalAxisLabels() {
context.textAlign = "center";
context.textBaseline = "top";
for (var i = 0; i <= NUM_HORIZONTAL_TICKS; i++) {
if (i % 5 === 0) {
context.fillText(i,
AXIS_ORIGIN.x + i * HORIZONTAL_TICK_SPACING,
AXIS_ORIGIN.y + SPACE_BETWEEN_ABELS_AND_AXIS);
}
}
}
//绘制水平轴标注
function drawHorizontalAxisLabels() {
context.textAlign = "center";
context.textBaseline = "middle";
for (var i = 0; i <= NUM_VERTICAL_TICKS; i++) {
if (i % 5 === 0) {
context.fillText(i,
AXIS_ORIGIN.x - SPACE_BETWEEN_ABELS_AND_AXIS,
AXIS_ORIGIN.y - i * VERTICAL_TICK_SPACING);
}
}
}

function drawGrid(color, stepx, stepy) {
context.save()
context.strokeStyle = color;
context.fillStyle = '#ffffff';
context.lineWidth = 0.5;
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
context.beginPath();
context.moveTo(i, 0);
context.lineTo(i, context.canvas.height);
context.stroke();
}
for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {
context.beginPath();
context.moveTo(0, i);
context.lineTo(context.canvas.width, i);
context.stroke();
}
context.restore();
}
context.font = "13px Arial";
drawGrid("lightgray", 10, 10);
context.shadowColor = "rgba(100, 140, 230, 0.8)";
context.shadowOffsetX = 3;
context.shadowOffsetY = 3;
context.shadowBlur = 5;
drawAxes();
drawAxisLabels();
</script>
</html>

效果:


该文章在 2022/10/21 11:47:21 编辑过
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved