html canvas缩放抗锯齿,Canvas上绘制的文本的抗锯齿效果差

function alphaBlend(gamma, c1, c2, alpha) {

c1 = c1/255.0;

c2 = c2/255.0;

var c3 = Math.pow(

Math.pow(c1, gamma) * (1 - alpha)

+ Math.pow(c2, gamma) * alpha,

1/gamma

);

return Math.round(c3 * 255);

}

function process(textPixels, destPixels, fg, bg) {

var gamma = 2.2;

for (var y = 0; y < textPixels.height; y ++) {

var history = [255, 255, 255];

var pixel_number = y * textPixels.width;

var component = 0;

for (var x = 0; x < textPixels.width; x ++) {

var alpha = textPixels.data[(y * textPixels.width + x) * 4 + 1] / 255.0;

alpha = Math.pow(alpha, gamma);

history[component] = alpha;

alpha = (history[0] + history[1] + history[2]) / 3;

out = alphaBlend(gamma, bg[component], fg[component], alpha);

destPixels.data[pixel_number * 4 + component] = out;

/* advance to next component/pixel */

component ++;

if (component == 3) {

pixel_number ++;

component = 0;

}

}

}

}

function toColor(colorString) {

return [parseInt(colorString.substr(1, 2), 16),

parseInt(colorString.substr(3, 2), 16),

parseInt(colorString.substr(5, 2), 16)];

}

function renderOnce() {

var phrase = "Corporate GOVERNANCE"

var c1 = document.getElementById("c1"); //the hidden canvas

var c2 = document.getElementById("c2"); //the canvas

var textSize=40;

var font = textSize+"px Arial"

var fg = "#ff0000";

var bg = "#fff9e1";

var ctx1 = c1.getContext("2d");

var ctx2 = c2.getContext("2d");

ctx1.fillStyle = "rgb(255, 255, 255)";

ctx1.fillRect(0, 0, c1.width, c1.height);

ctx1.save();

ctx1.scale(3, 1);

ctx1.font = font;

ctx1.fillStyle = "rgb(255, 0, 0)";

ctx1.fillText(phrase, 0, textSize);

ctx1.restore();

var textPixels = ctx1.getImageData(0, 0, c1.width, c1.height);

var colorFg = toColor(fg);

var colorBg = toColor(bg);

var destPixels3 = ctx1.getImageData(0, 0, c1.width, c1.height);

process(textPixels, destPixels3, colorBg, colorFg);

ctx2.putImageData(destPixels3, 0, 0);

//for comparison, show Comparison Text without anti aliaising

ctx2.font = font;

ctx2.fillStyle = "rgb(255, 0, 0)";

ctx2.fillText(phrase, 0, textSize*2);

};

renderOnce();