小编mag*_*mag的帖子

如何让html画布无限期地"滚动"?

我有一个canvas元素,在加载时会自动填充客户端的整个浏览器窗口.在它上面你可以用鼠标绘制,就像任何"制作绘图板"的结果一样.然而,我想要做的是,如果你将鼠标移动到画布的任何极端(或者可能选择某个"移动"工具,你可以沿你想要的任何方向拖动画布),它滚动.特别是,我希望理论上可以永久滚动,所以我不能真正预生成,我必须动态生成"更多画布".有没有人知道如何做到这一点?

如果它有帮助,这就是客户端javascript :( html只是一个canvas-tag)

$(document).ready(function() {
    init();
});

function init() {
    var canvas = document.getElementById('canvas')
      , ctx = canvas.getContext('2d')
      , width = window.innerWidth
      , height = window.innerHeight;

    // Sets the canvas size to be the same as the browser size
    canvas.width = width;
    canvas.height = height;

    // Binds mouse and touch events to functions
    $(canvas).bind({
        'mousedown':  startDraw,
        'mousemove':  draw,
        'mouseup':    stopDraw,
    });
};

// Triggered on mousedown, sets draw to true and updates X, Y values.
function startDraw(e) {
    this.draw …
Run Code Online (Sandbox Code Playgroud)

html javascript canvas

6
推荐指数
1
解决办法
3642
查看次数

标签 统计

canvas ×1

html ×1

javascript ×1