Можно ли «стереть» область в канвасе, так чтобы в бекграунде была видна страница?

Можно ли "стереть" область в канвасе, так чтобы в бекграунде была видна страница ?

Вот пример:
<!doctype html>
<html lang="ru">

<head>
    <meta charset="utf-8" />
    <title>
        Example
    </title>
    <script src="http://yandex.st/jquery/2.0.3/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            var canvas = document.getElementById('area');
            var ctx = canvas.getContext("2d");
            ctx.fillStyle = "rgba(255,255,255, 0.5)";
            ctx.fillRect(0, 0, $("#area").width(), $("#area").height());
            console.log($("#area").width());
            $(canvas).bind('mousedown', function (e) {
                eraser(e, ctx, 40);
                $(canvas).bind('mousemove', function (e) {
                    eraser(e, ctx, 40);
                });
            });

            $(canvas).bind('mouseup', function () {
                $(canvas).unbind('mousemove');
            });

        });

        function eraser(e, context, radius) {
            var mouseX, mouseY;
            //console.log(e.pageX);
            mouseX = e.pageX;
            mouseY = e.pageY;

            context.clearRect(mouseX, mouseY, radius, radius);

        }
    </script>
</head>

<body>
    <div id="wrapper">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
            ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
            delenit augue duis dolore te feugait nulla facilisi.</p>
    </div>
    <canvas id="area" style="width: 100%;height: 100%;position:fixed;top:0;left:0;"></canvas>
</body>

</html>
  • Вопрос задан
  • 2732 просмотра
Решения вопроса 1
itspers
@itspers
Слишком мало jquery)

Выкинул джейквери, убрал документреди, добавил ресайс канваса, чутка поправил чтоб в правильном месте рисовало - потом посмотрел на исходный код - вроде и так должно было работать.
Так что хз почему не работало, но в любом случае:
jsfiddle.net/itspers/Sjcch/3

var canvas_down = false;  

var canvas = document.getElementById('area');
var ctx = canvas.getContext("2d");

//resize to be sure that pixels == width
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;   
}
resizeCanvas();


ctx.fillStyle = "rgba(255,255,255, 0.9)";
ctx.fillRect(0, 0, $("#area").width(),$("#area").height()); 

canvas.addEventListener('mousedown', function (e) {
    canvas_down = true;    
}, false);

canvas.addEventListener('mouseup', function (e) {
    canvas_down = false;    
}, false);

canvas.addEventListener('mousemove', function (e) {
    if (canvas_down)
        eraser(e, 25);    
}, false);

   

function eraser(e, radius) {

    ctx.beginPath();
    var x2 = e.pageX - (radius/2);            
    var y2 = e.pageY- (radius/2);    
    ctx.clearRect(x2, y2, radius, radius);             
    ctx.closePath();

}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
нет, нельзя. Можно сделать (в данном случае) 4 блока которые будут обрамлять прозрачную область, и создавать эффект того что область вырезана.
Ответ написан
Комментировать
@GreatRash
Если вам важны только последние версии браузеров (IE11) и не важны мобилы (а именно Opera Mini и IE10 Mobile), то можно у канваса стереть часть изображения при помощи clearRect(), и в довесок почитать про pointer-events.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы