这是一个相当基础的实现:
http://jsfiddle.net/CQPeU/。
var can = document.getElementById("can"),
ctx = can.getContext('2d'),
dragging = false,
lastX = 0,
translated = 0;
ctx.scale(1,-1);
ctx.translate(0, -400);
can.onmousedown = function(e){
var evt = e || event;
dragging = true;
lastX = evt.offsetX;
}
window.onmousemove = function(e){
var evt = e || event;
if (dragging){
var delta = evt.offsetX - lastX;
translated += delta;
ctx.translate(delta, 0);
lastX = evt.offsetX;
draw();
}
}
window.onmouseup = function(){
dragging = false;
}
function draw() {
ctx.clearRect(-translated, 0, 600, 400);
for (var i = 0; i < plot.length; i++) {
ctx.beginPath();
ctx.arc(plot[i].x, plot[i].y, 5, 0, 2 * Math.PI);
ctx.fill();
}
}
要创建一个网格,你可以像这样做:
var grid = (function(dX, dY){
var can = document.createElement("canvas"),
ctx = can.getContext('2d');
can.width = dX;
can.height = dY;
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, dX, dY);
ctx.strokeStyle = 'orange';
ctx.moveTo(.5, 0.5);
ctx.lineTo(dX + .5, 0.5);
ctx.stroke();
ctx.moveTo(.5, .5);
ctx.lineTo(.5, dY + .5);
ctx.stroke();
return ctx.createPattern(can, 'repeat');
})(100, 50);
以下是使用方法:
function draw() {
ctx.clearRect(-translated, 0, 600, 400);
ctx.rect(-translated, 0, 600, 400);
ctx.fillStyle = grid;
ctx.fill();
ctx.fillStyle = "#fff";
for (var i = 0; i < plot.length; i++) {
ctx.beginPath();
ctx.arc(plot[i].x, plot[i].y, 5, 0, 2 * Math.PI);
ctx.fill();
}
}
演示更新: http://jsfiddle.net/CQPeU/2/
context.translate(-x, 0)
来模拟这种效果。这样,你就不必更改数据点的 x 坐标了。 - Shmiddty