html实现坐标轴,HTML5 Canvas笔记——改进绘制坐标轴

输入xy的值画出所对应的坐标轴

对“坐标系绘制”程序进行改进

(1)为横纵坐标线添合适的箭头；

(2)将横纵坐标线上的刻度线，长度减半，并且只画在线的一侧，而不是穿过线条；

(3)为坐标线及其刻度添加阴影等效果，使其更易观察。

(4)为“绘制坐标系”的函数添加2个输入函数：

a--正数，x轴的最大刻度值, b--正数，y轴的最大刻度值

并据此为x和y轴的刻度线对应添加上数字文本。

HTML

zbz

body {

background: #dddddd;

}

#canvas {

cursor: pointer;

position: absolute;

left: 0px;

top: 40px;

margin: 20px;

background: #ffffff;

border: thin solid #aaaaaa;

-webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);

box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);

}

x:

y:

确定

Canvas not supported

js

var canvas = document.getElementById('canvas'),

context = canvas.getContext('2d'),

AXIS_MARGIN = 40,//外边距

AXIS_ORIGIN = {x: AXIS_MARGIN, y: canvas.height - AXIS_MARGIN},//原点坐标，将坐标轴设置到画布左下区域

AXIS_TOP = AXIS_MARGIN,//纵轴的顶点位置

AXIS_RIGHT = canvas.width - AXIS_MARGIN,//横轴顶点位置

HORIZONTAL_TICK_SPACING = 10,//横向刻度线间距

VERTICAL_TICK_SPACING = 10,//垂直刻度线间距

AXIS_WIDTH = AXIS_RIGHT - AXIS_ORIGIN.x,//横轴长度

AXIS_HEIGHT = AXIS_ORIGIN.y - AXIS_TOP,//纵轴长度

NUM_VERTICAL_TICKS = AXIS_HEIGHT / VERTICAL_TICK_SPACING,//纵轴标尺的数量

NUM_HORIZONTAL_TICKS = AXIS_WIDTH / HORIZONTAL_TICK_SPACING,//横轴标尺的数量

TICK_WI