水平滚动 html,javascript – 水平滚动画布. HTML5

这是一个非常基本的实现：

http://jsfiddle.net/CQPeU/

var can = document.getElementById("can"),ctx = can.getContext('2d'),dragging = false,lastX = 0,translated = 0;

// these two lines will make the y-axis grow upwards.

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); // translate the context.

lastX = evt.offsetX;

draw(); // redraw

}

}

window.onmouseup = function(){

dragging = false;

}

function draw() {

ctx.clearRect(-translated,600,400); // this is why we need to keep track of how much we've translated

for (var i = 0; i < plot.length; i++) {

ctx.beginPath();

ctx.arc(plot[i].x,plot[i].y,5,2 * Math.PI); // note we don't have to futz with the x/y values,and can use them directly.

ctx.fill();

}

}

要创建一个网格,你可以这样做：

var grid = (function(dX,dY){

var can = document.createElement("canvas"),ctx = can.getContext('2d');

can.width = dX;

can.height = dY;

// fill canvas color

ctx.fillStyle = 'black';

ctx.fillRect(0,dX,dY);

// x axis

ctx.strokeStyle = 'orange';

ctx.moveTo(.5,0.5);

ctx.lineTo(dX + .5,0.5);

ctx.stroke();

// y axis

ctx.moveTo(.5,.5);

ctx.lineTo(.5,dY + .5);

ctx.stroke();

return ctx.createPattern(can,'repeat');

})(100,50);

这将像这样使用：

function draw() {

ctx.clearRect(-translated,400);

ctx.rect(-translated,400);

ctx.fillStyle = grid;

ctx.fill();

ctx.fillStyle = "#fff";

for (var i = 0; i < plot.length; i++) {

ctx.beginPath();

ctx.arc(plot[i].x,2 * Math.PI);

ctx.fill();

}

}