Canvas JS代码计算错误

时间:2017-01-14 12:05:32

标签: javascript canvas

我正在使用带有3个图像的画布(不同的滤镜叠加)。

当滚动功能重绘图像时,将scrollTop vaule添加到Y坐标。

一切都很好但是如果将100%的宽度和高度等于画布中的scrollTop值空白。

如何在不留空白区域的情况下实现绘图?

以下是工作示例: http://tech-tech1.host4g.ru/korp-m/

JS:

function redraw(e) {
if ("undefined" != typeof context) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    var i = e / maskModifier;
   context.save(),
        context.beginPath(),
        context.moveTo(0, 0 + i),
        context.lineTo(1920, 0 + i),
        context.lineTo(1280, 300 + i),
        context.lineTo(640, 0 + i),
        context.lineTo(0, 300 + i),
        context.clip(),
        context.drawImage(img_modelLine, 0, 0),
        context.restore(),

    context.save(),
        context.beginPath(),
        context.moveTo(0, 300 + i),
        context.lineTo(640, 0 + i),
        context.lineTo(1280, 300 + i),
        context.lineTo(1920, 0 + i),
        context.lineTo(1920, 330 + i),
        context.lineTo(1280, 630 + i),
        context.lineTo(640, 330 + i),
        context.lineTo(0, 630 + i),
        context.lineTo(0, 300 + i),
        context.clip(),
        context.drawImage(img_modelRed, 0, 0),
        context.restore(),
        context.save(),
        context.beginPath(),
        context.moveTo(1920, 330 + i),
        context.lineTo(1280, 630 + i),
        context.lineTo(1920, 930 + i),
        context.lineTo(1920, 330 + i),
        context.clip(),
        context.drawImage(img_modelLine, 0, +i),
        context.restore(),
        context.save(),
        context.beginPath(),
        context.moveTo(0, 630 + i),
        context.lineTo(0, 1297 + i),
        context.lineTo(1920, 1297 + i),
        context.lineTo(1920, 930 + i),
        context.lineTo(640, 330 + i),
        context.clip(),
        context.drawImage(img_modelColor, 0, +i),
        context.restore()
    }
    }

    var canvas,
context,
img_modelLine,
img_modelColor,
img_modelRed,
maskModifier;


    $(document).ready(function() {
0 != $("#stage").length && (canvas = document.getElementById("stage"),
    context = canvas.getContext("2d"),
    img_modelLine = document.getElementById("model-line"),
    img_modelRed = document.getElementById("model-red"),
    img_modelColor = document.getElementById("model-color"),
    maskModifier = 2)
    }), $(window).scroll(function() {
redraw(-$(document).scrollTop() );
    });

blank area on canvas http://tech-tech1.host4g.ru/korp-m/stackphoto.jpg

0 个答案:

没有答案