[點晴永久免費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
