Question

我试图通过突出显示由坐标定义的区域来改变图像。

enter image description here

我一直在使用两个画布，彼此叠加。现在我不知道这是否是最好的方法。 http://jsfiddle.net/9wJu8/

<canvas id='canvas'>Your browser does not support HTML5 canvas</canvas>
<canvas id='canvas2'>Your browser does not support HTML5 canvas</canvas>

目前，我正在使用两张图片，但我想知道是否有任何方法可以在画布上使用蒙版。

其次，我想保存堆叠画布的输出。

Answer 1

@Ken说的是什么，但我认为他的一些代码示例被意外遗漏了：

enter image description here

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

<!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 ctx=canvas.getContext("2d");

    var cw=700;
    var ch=438;

    var img=new Image();
    img.onload=start;
    img.src="cat.jpg";
    function start(){
        canvas.width=cw;
        canvas.height=ch;

        // draw the image on the canvas
        ctx.drawImage(img,0,0,cw,ch);

        // darken the image with a 50% black fill
        ctx.save();
        ctx.globalAlpha=.50;
        ctx.fillStyle="black";
        ctx.fillRect(0,0,cw,ch);
        ctx.restore();

        // ctx.clip() the area to highlight
        // and redraw the whole image
        // (the image will draw only in the clipping region)
        ctx.save();
        ctx.beginPath();
        ctx.clearRect(300,100,200,100);
        ctx.rect(300,100,200,100);
        ctx.clip();
        ctx.drawImage(img,0,0,cw,ch);
        ctx.restore();

    }

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Answer 2

您可以使用单个画布：

➔绘制完整图像
➔在顶部画一个透明的黑色矩形
➔使用带剪辑设置的drawImage()

例如：

// draw full image
ctx.drawImage(img, 0, 0);

// cover with a darkened overlay
ctx.fillStyle = 'rgba(0,0,0, 0.5);
ctx.fillRect(0, 0, canvas.width, canvas.height);

// draw region of image
ctx.drawImage(img, x, y, w, h,  x, y, w, h);

其中x，y，w和h是您要突出显示的区域。

要保存为图像，只需在画布元素上使用toDataURL()。

使用canvas / JS突出显示图像区域

2 个答案: