Question

我正在尝试从基于文件的画布中剪切某些图案，我需要使用多个几何形状。

为此，我使用设置为XOR的globalCompositeOperation在该画布上绘制形状。

$( document ).ready(function() {


var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.src = 'http://cimsec.org/wp-content/uploads/2014/01/adriatic-sea-horizon-igor-voljc.jpg';
var width = img.naturalWidth/2; // this will be 300
var height = img.naturalHeight/2; // this will be 400

document.getElementById('canvas').width = width;
document.getElementById('canvas').height = height;
img.onload = function() {
    ctx.drawImage(img, 0,0, width, height);
 
}
ctx.globalCompositeOperation = "xor";


function circle(x, y, radius)
{     
ctx.arc(x, y, radius, 0, 2 * Math.PI, false);   
ctx.fill();
}

var iks = width/2;
var sr = width/5;
var igrek = (sr);

circle(iks,igrek,sr);

var igrek2 = 3.5*sr;
circle(iks,igrek2,sr);

});

.lw { font-size: 60px; }
body {background-color:blue}

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->

  <canvas id="canvas"></canvas> 



<!-- End your code here -->
</body>
</html>

不幸的是，如果我尝试切割多个形状，它无法正常工作。在litewave上的示例中，只有第二个形状被正确切割，第一个只有周边切割。

最终我打算从图像切割形状，这个jpg示例上的白色区域应该是透明的： http://www.detroitbodyproducts.com/media/wysiwyg/hide.jpg

有没有更好的方法呢？

Answer 1

您需要先致电ctx.beginPath();，否则它无法正常工作：

＆＃13;

$( document ).ready(function() {


var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.src = 'http://cimsec.org/wp-content/uploads/2014/01/adriatic-sea-horizon-igor-voljc.jpg';
var width = img.naturalWidth/2; // this will be 300
var height = img.naturalHeight/2; // this will be 400

document.getElementById('canvas').width = width;
document.getElementById('canvas').height = height;
img.onload = function() {
    ctx.drawImage(img, 0,0, width, height);
 
}
ctx.globalCompositeOperation = "xor";


function circle(x, y, radius)
{     
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI, false);   
ctx.fill();
}

var iks = width/2;
var sr = width/5;
var igrek = (sr);

circle(iks,igrek,sr);

var igrek2 = 3.5*sr;
circle(iks,igrek2,sr);

});

＆＃13;

.lw { font-size: 60px; }
body {background-color:blue}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->

  <canvas id="canvas"></canvas> 



<!-- End your code here -->
</body>
</html>

＆＃13;

无法从画布切割多个形状

1 个答案: