HTML5 Canvas笔记——绘制坐标轴
2020-04-20 本文已影响0人
没昔
对“坐标系绘制”程序进行改进
（1）为横纵坐标线添合适的箭头；
（2）将横纵坐标线上的刻度线，长度减半，并且只画在线的一侧，而不是穿过线条；
（3）为坐标线及其刻度添加阴影等效果，使其更易观察。
（4）为“绘制坐标系”的函数添加2个输入函数：
a--正数，x轴的最大刻度值, b--正数，y轴的最大刻度值
并据此为x和y轴的刻度线对应添加上数字文本。
<!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 a = 17;
var b = 17;
//坐标标记的范围
var AXIS_WIDTH = AXIS_RIGHT - AXIS_ORIGIN.x;
var AXIS_HEIGHT = AXIS_ORIGIN.y - AXIS_TOP;
//纵向标记数值
var NUM_VERTICAL_TICKS = AXIS_HEIGHT / b;
//横向标记数值
var NUM_HORIZONTAL_TICKS = AXIS_WIDTH / a;
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 * a,
AXIS_ORIGIN.y - deltaY);
context.lineTo(AXIS_ORIGIN.x + i * a,
AXIS_ORIGIN.y );
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 ,
AXIS_ORIGIN.y - i * b);
context.lineTo(AXIS_ORIGIN.x + deltaX,
AXIS_ORIGIN.y - i * b);
context.stroke();
}
}
//画竖直线
function drawVerticalAxis() {
context.beginPath();
context.moveTo(AXIS_ORIGIN.x, AXIS_ORIGIN.y);
context.lineTo(AXIS_ORIGIN.x, AXIS_TOP);
//箭头
context.lineTo(AXIS_ORIGIN.x-20, AXIS_TOP+20);
context.moveTo(AXIS_ORIGIN.x, AXIS_TOP);
context.lineTo(AXIS_ORIGIN.x+20, AXIS_TOP+20);
context.strokeStyle = '#00f';
context.stroke();
}
//画水平线
function drawHorizontalAxis() {
context.beginPath();
context.moveTo(AXIS_ORIGIN.x, AXIS_ORIGIN.y);
context.lineTo(AXIS_RIGHT, AXIS_ORIGIN.y);
//箭头
context.lineTo(AXIS_RIGHT-20, AXIS_ORIGIN.y-20);
context.moveTo(AXIS_RIGHT, AXIS_ORIGIN.y);
context.lineTo(AXIS_RIGHT-20, AXIS_ORIGIN.y+20);
//ctx.lineJoin = 'miter'; //线的连接处采用尖角
//ctx.lineJoin = 'bevel'; //线的连接处采用方角
context.lineJoin = 'round'; //线的连接处采用圆角
context.lineWidth = 2;
context.strokeStyle = 'blue';
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 * a,
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 * b);
}
}
}
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>
效果如图:
