html 圆圈中间有条线,javascript – 用于圆圈的HTML5 Canvas ctx.clip()方法在圆圈下方留下一条线...

我已经创建了一个生成行星精灵的程序.我这样做是通过创建一个圆形路径,运行ctx.clip()来保持所有以下图层在圆圈内,然后绘制一个黑色和透明的纹理图层,然后在整个画布上随机着色的矩形,然后是阴影并在它上面发光.问题是裁剪后圆圈下面也会出现彩色线条,我不知道为什么.我需要删除它.

解决方法:

我不确定我是否理解你的问题,但我会假设你在谈论anti-aliasing问题.

目前,您正在绘制剪裁区域.

在每次抽奖时,新的抗锯齿工件将平滑最新的绘图.最后,应该是半透明像素现在是完全不透明的像素.

另一方面,对于像’destination-in’这样的globalCompositeOperation,您只需要一个绘图来进行合成(〜剪裁).所以你不积累工件.但即使你这样做,gCO也是全球性的,因为考虑到透明度,积累就不那么重要了.

var ctx1 = clip.getContext('2d');

var ctx2 = gCO.getContext('2d');

var ctx3 = gCO2.getContext('2d');

ctx1.beginPath();

ctx1.arc(150, 150, 150, 0, Math.PI*2)

ctx1.clip();

// drawing multiple times on this clipped area will increase artifacts

ctx1.fillRect(0,0,300, 150);

ctx1.fillRect(0,0,300, 150);

ctx1.fillRect(0,0,300, 150);

ctx1.fillRect(0,0,300, 150);

ctx2.beginPath();

ctx2.arc(150, 150, 150, 0, Math.PI*2)

ctx2.fillRect(0,0,300, 150);

ctx2.globalCompositeOperation = 'destination-in';

//With gCO you only draw once, but even if you did draw multiple times, there would still be less artifacts

ctx2.fill();

ctx2.fill();

ctx2.fill();

ctx2.fill();

ctx2.globalCompositeOperation = 'source-over';

ctx3.beginPath();

ctx3.arc(150, 150, 150, 0, Math.PI*2)

ctx3.fillRect(0,0,300, 150);

ctx3.globalCompositeOperation = 'destination-in';

// only one drawing needed:

ctx3.fill();

ctx3.globalCompositeOperation = 'source-over';

ctx1.fillStyle = ctx2.fillStyle = ctx3.fillStyle = "white";

ctx1.fillText('clipping', 120, 100);

ctx2.fillText('compositing', 120, 100);

ctx3.fillText('single compositing', 120, 100);

canvas{

border: 1px solid;

}

关于您的代码的一些不相关的注释：

closePath不标记路径声明的结尾,只有新的beginPath()调用. ctx.fillStyle =’transparent’; ctx.fill()不会做任何事情.只有putImageData,clearRect方法和globalCompositeOperation绘制方法才能产生透明像素.

所以以上所有内容都在一个片段中：

/* Load images */

var texture = new Image();

texture.src = "http://i.imgur.com/0qMwa8p.png";

var shadow = new Image();

shadow.src = "http://i.imgur.com/pX3HVFY.png";

/* Create the canvas and context references */

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

canvas.style.width = (canvas.width = 512) + "px";

canvas.style.height = (canvas.height = 512) + "px";

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

/* render */

function render() {

/* Size of planets */

var scale = Math.random() + 1

// We don't need to save/restore the canvas state now,

// simply remember to set the gCO back to 'source-over'

// here it done at the end of the function

/* Clear canvas for redraw */

ctx.clearRect(0, 0, canvas.width, canvas.height);

/* Place texture onto planet */

ctx.globalAlpha = Math.random() * .5 + .5;

ctx.drawImage(texture, (Math.round(Math.random() * 256) - 128 * scale), (Math.round(Math.random() * 256) - 128 * scale), texture.naturalWidth * scale, texture.naturalHeight * scale)

/* Color Planet */

ctx.globalAlpha = 1;

ctx.globalCompositeOperation = "multiply";

var color = "hsl(" + Math.random() * 256 + ", 100%, 50%)"

ctx.fillStyle = color;

ctx.fillRect(0, 0, canvas.width, canvas.height)

/* Give planet its shine and shadow */

ctx.globalCompositeOperation = "source-over";

ctx.drawImage(shadow, Math.round(Math.random() * 200 - 128 * scale), Math.round(Math.random() * 200 - 128 * scale), shadow.naturalWidth * scale, shadow.naturalHeight * scale)

// instead of clipping, use gCO

ctx.globalCompositeOperation = 'destination-in';

ctx.beginPath();

ctx.arc(256, 256, 128 * scale, 0, 2 * Math.PI);

ctx.fill();

// reset gCO

ctx.globalCompositeOperation = 'source-over';

}

render()

window.interval = setInterval(render, 500)

#game {

border: 1px solid black;

background-color: black;

}

标签：clip,javascript,html5,canvas

来源： https://codeday.me/bug/20190927/1825002.html