如何解决如何在没有插值的情况下在画布HTML5上绘制圆弧？
我正在使用以下代码在HTML5画布上绘制：
const context = canvas.getContext('2d');
context.beginPath();
context.arc(x,y,radius,2 * Math.PI,false);
context.fillStyle = color;
context.fill();
context.closePath();
但是，如果我打印唯一值：
console.log(new Set(context.getImageData(0,canvas.width,canvas.height).data))
我可以看到我在fillStyle中使用的颜色已经插值了。
我尝试通过添加以下标志来禁用插值/平滑处理：
context.imageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.mozImageSmoothingEnabled = false;
但是，它没有帮助。如果您能建议我如何解决此问题，我将不胜感激。
解决方法
这不是绘制像素化圆的原生方法。为此，您必须手动渲染每个像素。
您可以使用几种方法来执行此操作。最常见的还有一些其他人工痕迹（例如线宽不一致），这些人工痕迹很难避免。
以下函数使用对Berzingham line algorithm的Midpoint circle algorithm（也适用于渲染像素化线）的修改来画一个圆。
不幸的是，大多数可以画任意线和圆的方法都很慢。上面提到的两个是我所知道的最快的标准方法。
示例
该示例定义了3个绘制像素化圆的函数
-
pixelPixelatedCircle（例如，红色的外部圆圈和蓝色的圆圈）使用当前的填充样式绘制一个像素宽的圆圈 -
fillPixelatedCircle（例如红色内圈）使用当前的填充样式绘制一个实心圆 -
strokePixelatedCircle（例如，黑色圆圈）绘制具有宽度的圆圈线。宽度仅在> = 2时才起作用。如果要单个像素宽度，请使用第一个功能。同样不是该函数使用第二个画布来渲染圆
该示例绘制了所有三种类型
使用pixelPixelatedCircle绘制的外部红色圆圈用来证明圆圈的质量是一致的。应该有交替的1像素宽度的圆圈，红色和深红色。外面的蓝色正好碰到画布边缘的圆圈。
对于半径小于2的圆，请使用ctx.rect，因为结果将是相同的。
-
注意：圆半径是整数，因此圆半径1000将等于圆半径1000.9。该示例适用于圆心。为了具有子像素的位置和半径，将需要另一种算法，该算法速度较慢且线条质量较低。
-
注意：我添加了一个简单的缩放画布，以便可以更好地看到结果，我打算删除它，但只留给有兴趣的人使用。答案并不重要。
const ctx = canvas.getContext("2d");
const w = canvas.width;
const h = canvas.height;
const size = Math.min(w,h);
const circleWorkCanvas = document.createElement("canvas");
const cCtx = circleWorkCanvas.getContext("2d");
function resizeCircleCanvas(ctx) {
if (circleWorkCanvas.width !== ctx.canvas.width || circleWorkCanvas.height !== ctx.canvas.height) {
circleWorkCanvas.width = ctx.canvas.width;
circleWorkCanvas.height = ctx.canvas.height;
}
}
strokePixelatedCircle(ctx,w / 2 | 0,h / 2 | 0,size * 0.35,5);
strokePixelatedCircle(ctx,size * 0.3,4);
strokePixelatedCircle(ctx,size * 0.25,3);
strokePixelatedCircle(ctx,size * 0.2,2);
ctx.fillStyle = "red";
fillPixelatedCircle(ctx,w / 2,h / 2,size * 0.15);
ctx.fillStyle = "blue";
pixelPixelatedCircle(ctx,size * 0.38);
ctx.fillStyle = "blue";
pixelPixelatedCircle(ctx,size * 0.5);
ctx.fillStyle = "red";
for(let v = 0.40; v < 0.49; v += 1 / size) {
ctx.fillStyle = "#600"
pixelPixelatedCircle(ctx,size * v);
ctx.fillStyle = "#F00"
v += 1 / size;
pixelPixelatedCircle(ctx,size * v );
}
function strokePixelatedCircle(ctx,cx,cy,r,lineWidth) {
resizeCircleCanvas(ctx);
cCtx.clearRect(0,cCtx.canvas.width,cCtx.canvas.height);
cCtx.globalCompositeOperation = "source-over";
cCtx.fillStyle = ctx.strokeStyle;
fillPixelatedCircle(cCtx,r + lineWidth / 2);
cCtx.globalCompositeOperation = "destination-out";
fillPixelatedCircle(cCtx,r - lineWidth / 2);
cCtx.globalCompositeOperation = "source-over";
ctx.drawImage(cCtx.canvas,0);
}
function fillPixelatedCircle(ctx,r){
r |= 0; // floor radius
ctx.setTransform(1,1,0); // ensure default transform
var x = r,y = 0,dx = 1,dy = 1;
var err = dx - (r << 1);
var x0 = cx - 1| 0,y0 = cy | 0;
var lx = x,ly = y;
ctx.beginPath();
while (x >= y) {
ctx.rect(x0 - x,y0 + y,x * 2 + 2,1);
ctx.rect(x0 - x,y0 - y,1);
if (x !== lx){
ctx.rect(x0 - ly,y0 - lx,ly * 2 + 2,1);
ctx.rect(x0 - ly,y0 + lx,1);
}
lx = x;
ly = y;
y++;
err += dy;
dy += 2;
if (err > 0) {
x--;
dx += 2;
err += (-r << 1) + dx;
}
}
if (x !== lx) {
ctx.rect(x0 - ly,ly * 2 + 1,1);
ctx.rect(x0 - ly,1);
}
ctx.fill();
}
function pixelPixelatedCircle(ctx,r){
r |= 0;
ctx.setTransform(1,dy = 1;
var err = dx - (r << 1);
var x0 = cx | 0,y0 = cy | 0;
var lx = x,ly = y;
var w = 1,px = x0;
ctx.beginPath();
var rendering = 2;
while (rendering) {
const yy = y0 - y;
const yy1 = y0 + y - 1;
const xx = x0 - x;
const xx1 = x0 + x - 1;
ctx.rect(xx,yy1,1);
ctx.rect(xx,yy,1);
ctx.rect(xx1,1);
ctx.rect(xx1,1);
if (x !== lx){
const yy = y0 - lx;
const yy1 = y0 + lx - 1;
const xx = x0 - ly;
w = px - xx;
const xx1 = x0 + ly - w;
ctx.rect(xx,w,1);
ctx.rect(xx,1);
ctx.rect(xx1,1);
px = xx;
}
lx = x;
ly = y;
y++;
err += dy;
dy += 2;
if (err > 0) {
x--;
dx += 2;
err += (-r << 1) + dx;
}
if (x < y) { rendering -- }
}
ctx.fill();
}
const ctxZ = canvasZoom.getContext("2d");
canvas.addEventListener("mousemove",(event) => {
ctxZ.clearRect(0,30,30);
ctxZ.drawImage(canvas,-(event.pageX-10),-(event.pageY-10));
});canvas {border: 1px solid black}
#canvasZoom {
width: 300px;
height: 300px;
image-rendering: pixelated;
}<canvas id="canvas" width="300" height="300"></canvas>
<canvas id="canvasZoom" width="30" height="30"></canvas>,
似乎没有内置的设置，但是您可以遍历图像数据并设置单个像素（如果它们在所需阈值之内）。
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
context.beginPath();
context.arc(250,250,2 * Math.PI,false);
context.fillStyle = 'rgb(255,0)';
context.fill();
context.closePath();
console.log(getDistinctColors(context).length + " distinct colors before filter");
solidifyColor(context,255,0);
console.log(getDistinctColors(context).length + " distinct colors aftrer filter");
function solidifyColor(context,g,b,threshold = 3) {
const imageData = context.getImageData(0,context.canvas.width,context.canvas.height);
for (let i = 0; i < imageData.data.length; i += 4) {
var rDif = Math.abs(imageData.data[i + 0] - r);
var bDif = Math.abs(imageData.data[i + 1] - b);
var gDif = Math.abs(imageData.data[i + 2] - g);
if (rDif <= threshold && bDif <= threshold && gDif <= threshold) {
imageData.data[i + 0] = r;
imageData.data[i + 1] = g;
imageData.data[i + 2] = b;
imageData.data[i + 3] = 255; // remove alpha
}
}
context.putImageData(imageData,0);
}
function getDistinctColors(context) {
var colors = [];
const imageData = context.getImageData(0,context.canvas.height);
for (let i = 0; i < imageData.data.length; i += 4) {
colors.push([
imageData.data[i + 0],// R value
imageData.data[i + 1],// G value
imageData.data[i + 2],// B value
imageData.data[i + 3] // A value
]);
}
return [...new Set(colors.map(a => JSON.stringify(a)))].map(a => JSON.parse(a));
}<canvas id=canvas width=500 height=500></canvas>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
