输入xy的值画出所对应的坐标轴
对“坐标系绘制”程序进行改进
(1)为横纵坐标线添合适的箭头;
(2)将横纵坐标线上的刻度线,长度减半,并且只画在线的一侧,而不是穿过线条;
(3)为坐标线及其刻度添加阴影等效果,使其更易观察。
(4)为“绘制坐标系”的函数添加2个输入函数:
a--正数,x轴的最大刻度值, b--正数,y轴的最大刻度值
并据此为x和y轴的刻度线对应添加上数字文本。
HTML
zbzbody {
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