避免锯齿状边缘

Question

大家好:

我正在构建一个牙医的应用程序。我用illustrator绘制了牙齿图，并用一个众所周知的插件导出它。结果非常棒。然后我开始探索插件生成的代码(大约3000行)。

这是插件

生成的一部分代码

ctx.save();
ctx.beginPath();
ctx.moveTo(67.9, 113.9);
ctx.bezierCurveTo(67.9, 113.9, 69.9, 89.8, 67.9, 78.8);
ctx.bezierCurveTo(65.9, 67.8, 61.1, 58.8, 58.9, 55.4);
ctx.bezierCurveTo(56.7, 52.0, 54.3, 50.4, 53.6, 49.8);
ctx.bezierCurveTo(52.9, 49.2, 51.1, 48.2, 50.7, 49.8);
ctx.bezierCurveTo(50.3, 51.4, 50.7, 54.8, 50.7, 54.8);
ctx.bezierCurveTo(50.7, 54.8, 47.7, 54.0, 47.5, 55.2);
ctx.bezierCurveTo(47.3, 56.4, 47.1, 57.6, 47.5, 65.6);
ctx.bezierCurveTo(47.9, 73.6, 48.0, 81.4, 47.3, 86.4);
ctx.bezierCurveTo(46.5, 91.4, 42.6, 102.5, 42.6, 102.5);
ctx.lineTo(41.3, 108.1);
ctx.lineTo(47.7, 111.3);
ctx.lineTo(55.0, 113.9);
ctx.lineTo(61.9, 113.9);
ctx.lineTo(67.1, 113.9);
gradient = ctx.createLinearGradient(63.4, 65.4, 53.9, 97.3);
gradient.addColorStop(0.00, "rgb(255, 255, 255)");
gradient.addColorStop(1.00, "rgb(172, 171, 148)");
ctx.fillStyle = gradient;
ctx.fill();

http://jsfiddle.net/Artynok/qL79Y/4/

我的想法是给每颗牙齿上色，因为DB存储的数据带有相关信息(生病=>红色，愈合=>蓝色，外部治疗=>紫色)。我做了一个JSON对象来存储所有的梯度坐标从这整个代码，使用一些php代码我可以获得所有的梯度数据(ctx。createlineeargradient和RadialGradient).

在绘制之前多次尝试影响代码后，我决定在绘制发生时在JSON上编写存储操作。因此，当画布结束绘制牙齿的一部分时，我抓取渐变坐标，找到带有颜色状态的OBJ并与之匹配:

http://jsfiddle.net/Artynok/qL79Y/3/

直到这里一切都很好，除了因为图形得到了梯度，但有锯齿状的线条。我知道我在重新绘制牙齿，即使牙齿是否有临床状态，因为如果我不命令用正常的颜色来绘制，其余的牙齿开始得到我最后使用的颜色。

那么有没有一种方法可以"擦除"旧的渐变来放置新的渐变，或者改变颜色来重新绘制它呢?

Answer 1

有一个hack，你可以尝试(这并不能真正解决锯齿边缘的问题，但可以改善视网膜显示器的外观)。

如果你把图片设为2x，然后通过CSS将大小调整回正常大小，它会看起来更好。

JS:

canvas.width = 600;
canvas.height = 600;

CSS:

canvas{
  margin:0 auto;
  background:#333;
  width:300px;
  height:300px;
}

http://jsfiddle.net/qL79Y/6/

Answer 2

当我在做进度条插件时，我不得不处理画布中的质量问题，事实是画布是栅格图形，这意味着质量永远不会完美或非常可扩展。由于您正在使用illustrator来导出图形，您是否考虑过使用SVG?它有相当不错的浏览器支持，因为它是矢量的图形总是最好的质量。

Answer 3

我解决了问题。因为我知道我在同一张图上画了很多次，所以我对径向和线性梯度重画段进行了双重检查。我对这些值进行的循环进行了不必要的重绘。我在绘制操作中逐个传递每个片段的值。这将花费我太多的时间来重新排列incode，但结果是值得的。

setGradient :   function(p,datos,z){//<-- now i'm passing the values instead to loop
        //dos caminos o radial o linear dependiendo quien tenga datos
        a = 0;
        b = 0;
        c = 0;
        d = 0;
        //for(z in this[p]){ <-- this was the cause of the pain in the head
            if(datos[p].estClin){
                //diente enfermo
                if(datos[p].estClin == "enfermo"){
                    if(z != "boundaries" && z != "data"){
                        console.log(z,p);
                        if(this[p][z]['linearCoord'].length != 0){
                            arrCord = this[p][z]['linearCoord'];
                            grad = this[p][z].draw.createLinearGradient(arrCord[0],arrCord[1],arrCord[2],arrCord[3]);
                        }else if(this[p][z]['radialCoord'].length != 0){
                            arrCord = this[p][z]['radialCoord'];
                            grad = this[p][z].draw.createRadialGradient(arrCord[0],arrCord[1],arrCord[2],arrCord[3],arrCord[4],arrCord[5]);
                        }
                        this.setColor(this[p][z].draw,grad,"rgb(255, 136, 136)");
                    }
                }else if(datos[p].estClin == "tratado" && datos[p].externo == "no"){
                    if(z != "boundaries" && z != "data"){
                        if(this[p][z]['linearCoord'].length != 0){
                            arrCord = this[p][z]['linearCoord'];
                            grad = this[p][z].draw.createLinearGradient(arrCord[0],arrCord[1],arrCord[2],arrCord[3]);
                        }else if(this[p][z]['radialCoord'].length != 0){
                            arrCord = this[p][z]['radialCoord'];
                            grad = this[p][z].draw.createRadialGradient(arrCord[0],arrCord[1],arrCord[2],arrCord[3],arrCord[4],arrCord[5]);
                        }
                        this.setColor(this[p][z].draw,grad,"rgb(93, 138, 232)");
                    }
                //tratado externo
                }else if(datos[p].estClin == "tratado" && datos[p].externo == "si"){
                    if(z != "boundaries" && z != "data"){
                        if(this[p][z]['linearCoord'].length != 0){
                            arrCord = this[p][z]['linearCoord'];
                            grad = this[p][z].draw.createLinearGradient(arrCord[0],arrCord[1],arrCord[2],arrCord[3]);
                        }else if(this[p][z]['radialCoord'].length != 0){
                            arrCord = this[p][z]['radialCoord'];
                            grad = this[p][z].draw.createRadialGradient(arrCord[0],arrCord[1],arrCord[2],arrCord[3],arrCord[4],arrCord[5]);
                        }
                        this.setColor(this[p][z].draw,grad,"rgb(142, 108, 209)");
                    }
                }
            }else{
                if(z != "boundaries" && z != "data"){
                    if(this[p][z]['linearCoord'].length != 0){
                        arrCord = this[p][z]['linearCoord'];
                        grad = this[p][z].draw.createLinearGradient(arrCord[0],arrCord[1],arrCord[2],arrCord[3]);

                    }else if(this[p][z]['radialCoord'].length != 0){
                        arrCord = this[p][z]['radialCoord'];
                        grad = this[p][z].draw.createRadialGradient(arrCord[0],arrCord[1],arrCord[2],arrCord[3],arrCord[4],arrCord[5]);
                    }
                    this.setColor(this[p][z].draw,grad,"rgb(172, 171, 148)");
                }
            }
            //Aqui tratamos la info de los dientes a mostrar
        //}

http://jsfiddle.net/Artynok/qL79Y/9/

现在的图表是通过99.99%干净，但这是完全可以接受的谢谢大家!!