[点晴永久免费OA]html5在canvas上绘制坐标轴
当前位置：点晴教程→点晴OA办公管理信息系统
→『 经验分享&问题答疑 』
<!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 编辑过 |
相关文章
正在查询... 
|
400 186 1886
