html5 scrolling,javascript - Horizontal Scrolling on Canvas. HTML5 - Stack Overflow

电玩女神 2022-10-09 05:57 37阅读 0赞

Here's a pretty basic implementation: 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, 0, 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, 0, 2 \* Math.PI); // note we don't have to futz with the x/y values, and can use them directly.

ctx.fill();

\}

\}

To create a grid, you could do something like this:

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, 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);

Which would be used like this:

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();

\}

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，37人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5 Canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。canvas 元素本身是没有

雨点打透心脏的1/2处/ 2023年07月12日 14:21/ 0 赞/ 43 阅读

相关 HTML5 Canvas

Canvas画布描述获取方式注意点画布API 上下文API 颜色、样式和阴影线条样式

落日映苍穹つ/ 2023年01月10日 13:13/ 0 赞/ 183 阅读

相关 html5 canvas background.src,html - HTML5 generate canvas background image - Stack Overflow

CSS \wrapper canvas \{ position: relative; \} \wrapper canvas \{ border: 1px solid

不念不忘少年蓝@/ 2022年10月12日 04:07/ 0 赞/ 156 阅读

相关 html5 scrolling,javascript - Horizontal Scrolling on Canvas. HTML5 - Stack Overflow

Here's a pretty basic implementation: http://jsfiddle.net/CQPeU/ var can = document.get

电玩女神/ 2022年10月09日 05:57/ 0 赞/ 38 阅读

相关 edge html5播放,html - Video recording with Edge using HTML5 - Stack Overflow

I am trying to record video using HTML5 API. I want this solution to be cross platform a

曾经终败给现在/ 2022年10月07日 15:58/ 0 赞/ 34 阅读

相关 html5 canvas word,HTML5 Canvas

Canvas 转为图片我们可以使用 Canvas2image 库将 canvas 转换为图片。使用方式如下： Canvas2Image.saveAsImage(can

朴灿烈づ我的快乐病毒、/ 2022年10月07日 12:47/ 0 赞/ 289 阅读

相关 html5 imports,html - HTML5 Imports not working - Stack Overflow

The correct to do this is through server side pages includes or through JavaScript. PHP

Myth丶恋晨/ 2022年10月04日 14:54/ 0 赞/ 27 阅读

相关 HTML5 canvas

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

冷不防/ 2022年07月19日 11:48/ 0 赞/ 300 阅读

相关 HTML5Canvas

Canvas -> 做游戏：白鹭引擎、trees... 动画图表、频谱画图 HTML5 不只是单纯HTML 本身是一个标签 <canvas></canva

素颜马尾好姑娘i/ 2022年06月10日 05:19/ 0 赞/ 331 阅读

相关【HTML5】——Canvas

Canvas是HTML5中所有新特性中目前应用最广泛的一个，可以替代引入的图片（图形）用途：完成HTML页面中的图形绘制，实现网络游戏或单击游戏（网页游戏），在HTML中

曾经终败给现在/ 2022年06月07日 03:44/ 0 赞/ 395 阅读