我正在使用带有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