Question

我正在尝试创建一个矩形，该矩形将在动态剪辑的图像上淡入淡出。

然而，任何创建矩形的实例都会在绘制的图像后面，我似乎无法弄清楚如何将它放在顶部，因此形状和图像都会被剪裁。

这是我目前所处的小提琴：JSFiddle

这是我的HTML：

 <div id='demo'>
    <canvas  id="canvas" width="200px" height="200px"></canvas>
    <img id="img" src="http://www.filterforge.com/more/help/images/size200.jpg" />   
 </div>

这是我的javascript：

function init(){
            var canvas = document.getElementById('canvas');
            var c = canvas.getContext('2d');

            var r = 1;

            function draw(){
                c.beginPath();
                c.arc(100,100,r,0,2*Math.PI,false);
                r = r + 1;

                // Start Image
                c.save();
                c.clip();
                var img = document.getElementById('img');
                c.drawImage(img,0,0);
                c.restore();

                // The Rectangle I am also trying to mask
                c.fillStyle = "rgba(0,0,0,0.025)"
                c.fillRect(0, 0, 200, 200);
                c.save();
                c.clip();
                c.restore();

                if(r < 100){

                    requestAnimationFrame(draw);

                }
                r++;
            }

            requestAnimationFrame(draw);

        }
init();

我很感激你们提供的任何帮助。

谢谢，

Answer 1

以下是剪辑所需的顺序：

context.save
定义剪裁区域（例如弧线）
的drawImage
context.restore

演示：http://jsfiddle.net/m1erickson/YS45U/

代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas = document.getElementById('canvas');
    var c = canvas.getContext('2d');
    var r = 0;

    var img=new Image();
    img.onload=function(){
        draw();
    };
    img.src="http://www.filterforge.com/more/help/images/size200.jpg";

    function draw(){

        // request another animation if not 100%
        if(++r<100){
            requestAnimationFrame(draw);
        }

        // save the unclipped context
        c.save();

        // set the clipping region
        c.beginPath();
        c.arc(100,100,r,0,2*Math.PI,false);
        c.closePath();
        c.clip();

        // draw the image into the clipped region
        c.drawImage(img,0,0);

        // restore the canvas context
        c.restore();

    }

    $("#stop").click(function(){});

}); // end $(function(){});
</script>

</head>

<body>
    <button id="stop">Stop</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

画布：在绘制的图像和剪辑之间插入渐变矩形

1 个答案: