Question

我有一个图像，我想淡化图像的中央圆形部分，使其显示清晰，其余部分要褪色。

我尝试使用画布以及拍摄两个div并使其中一个消失，但没有工作。

以下是我需要的图案，圆圈外的区域会褪色。请帮助!!

enter image description here

Answer 1

这是一个起点，让您获得一个明确的中心和淡出色彩的图像：

位置2画布 - 一个在另一个
在底部画布上绘制图像
用您的颜色（蓝色等）填充顶部画布
使用缩放，阴影和合成的组合来“显示”

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

enter image description here

示例代码：

<!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{position:absolute;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var canvas1=document.getElementById("canvas1");
    var ctx1=canvas1.getContext("2d");

    var img=new Image();img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/landscape2.jpg";
    function start(){
        canvas.width=canvas1.width=img.width/3;
        canvas.height=canvas1.height=img.height/3;
        ctx.drawImage(img,0,0,img.width,img.height,0,0,img.width/3,img.height/3);
        ctx1.fillStyle="dodgerblue";
        ctx1.fillRect(0,0,canvas1.width,canvas1.height);
        ctx1.save();
        ctx1.scale(3,1);
        ctx1.globalCompositeOperation="destination-out";
        ctx1.arc(-100,120,40,0,Math.PI*2);
        ctx1.shadowColor="white";
        ctx1.shadowBlur=60;
        ctx1.shadowOffsetX=500;
        ctx1.fill();
        ctx1.restore();
    }

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

仅在html中淡化图像的一部分

1 个答案: