求解答下canvas的问题。

按时打算按时大323 2018-09-17 07:07:53

我的底层是一张图片，然后绘制了一个

圆圈，然后填充。
如何使白圈里的不被填充，显示底层的图片而没有绿色的填充。

或者只填充圈之外的，

如何能做到。

...全文

820 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

按时打算按时大323 2018-10-07

打赏
举报

引用 7 楼 jslang 的回复:

绘制两个圆形路径，注意j里外两个圆形路径要一个顺时针一个逆时针



<canvas id="canvasId" width="400" height="350"></canvas>

<script type="text/javascript">

var canvas = document.getElementById("canvasId");

var ctx = canvas.getContext("2d");

ctx.fillStyle = "#090";

ctx.beginPath();

ctx.arc(100,100,100,0,2*Math.PI,true);

ctx.arc(80,120,40,0,2*Math.PI,false);

ctx.closePath();

ctx.fill();

</script>

厉害厉害，谢谢帮我解决了！

Mozi92 2018-09-29

打赏
举报

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body style="margin:0;padding:0;">

<div alt="" style="position:absolute;left:0;top:0;width: 600px;height: 300px;z-index: -1;"></div>
<canvas id="canvas" width="600" height="300" style="z-index: 101;"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
/**
*
* 大圆
*
*/
ctx.beginPath();
ctx.arc(300, 150, 150, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = 'rgba(100, 100, 100, 1)';//填充大圆
ctx.fill();

/**
*
* 小圆
*
*/
ctx.beginPath();
ctx.arc(300 , 150, 75, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = 'rgba(255, 255, 255, 1)';//透明小圆
ctx.fill();

}
</script>

</html>

scscms太阳光 2018-09-29

打赏
举报

白圈里用背景图片渲染，等效于透明效果

天际的海浪 2018-09-29

打赏
举报

绘制两个圆形路径，注意j里外两个圆形路径要一个顺时针一个逆时针


<canvas id="canvasId" width="400" height="350"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#090";
ctx.beginPath();
ctx.arc(100,100,100,0,2*Math.PI,true);
ctx.arc(80,120,40,0,2*Math.PI,false);
ctx.closePath();
ctx.fill();
</script>

按时打算按时大323 2018-09-18

打赏
举报

引用 1 楼 u013116426 的回复:

给里面也填充你想要的颜色呢？

我背景是图片，我是只想显示原本的图片，不受填充影响。

按时打算按时大323 2018-09-18

打赏
举报

这个方法感觉效果比较差。

Hello World, 2018-09-18

打赏
举报

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>圆环</title>

</head>

<body>

    <canvas id="main" width="404" height="404" style="border: 1px solid green;"></canvas>

</body>

</html>

<script>

    var c = document.getElementById("main");

    var PI = Math.PI;

    var ctx = c.getContext("2d");

    ctx.lineWidth = 80;

    ctx.strokeStyle = '#009900';

    ctx.beginPath();

    ctx.arc(202, 202, 100, 0, 2 * Math.PI);

    ctx.stroke();

</script>