HTML5canvas和反锯齿
如何打开canvas上的反锯齿 。
下面的代码不会画出一条平滑的线条：
var context = mainCanv.getContext("2d"); if (context) { context.moveTo(0,0); context.lineTo(100,75); context.strokeStyle = "#df4b26"; context.lineWidth = 3; context.stroke(); } 消除锯齿function无法打开或closures，并由浏览器控制。
我可以closuresHTML <canvas>元素的抗锯齿function吗？
您可以将canvas翻译半个像素的距离。
ctx.translate(0.5, 0.5);
最初是物理像素之间的canvas定位点。
我不需要打开反别名，因为它默认情况下，但我需要closures它。 如果可以closures，也可以打开。
ctx.imageSmoothingEnabled = true;
当我在我的canvasRPG上工作时，我通常会closures它，所以当我放大图像时不要模糊。
这是一个解决方法，要求您逐个像素地绘制线条，但是会防止消除锯齿。
// some helper functions // finds the distance between points function DBP(x1,y1,x2,y2) { return Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)); } // finds the angle of (x,y) on a plane from the origin function getAngle(x,y) { return Math.atan(y/(x==0?0.01:x))+(x<0?Math.PI:0); } // the function function drawLineNoAliasing(ctx, sx, sy, tx, ty) { var dist = DBP(sx,sy,tx,ty); // length of line var ang = getAngle(tx-sx,ty-sy); // angle of line for(var i=0;i<dist;i++) { // for each point along the line ctx.fillRect(Math.round(sx + Math.cos(ang)*i), // round for perfect pixels Math.round(sy + Math.sin(ang)*i), // thus no aliasing 1,1); // fill in one pixel, 1x1 } }
基本上，你可以find线的长度，并逐步遍历该线，四舍五入每个位置，并填充一个像素。
用它来呼叫
var context = cv.getContext("2d"); drawLineNoAliasing(context, 20,30,20,50); // line from (20,30) to (20,50)
如果你需要在canvas上进行像素级控制，你可以使用createImageData和putImageData 。
HTML：
<canvas id="qrCode" width="200", height="200"> QR Code </canvas>
和JavaScript：
function setPixel(imageData, pixelData) { var index = (pixelData.x + pixelData.y * imageData.width) * 4; imageData.data[index+0] = pixelData.r; imageData.data[index+1] = pixelData.g; imageData.data[index+2] = pixelData.b; imageData.data[index+3] = pixelData.a; } element = document.getElementById("qrCode"); c = element.getContext("2d"); pixcelSize = 4; width = element.width; height = element.height; imageData = c.createImageData(width, height); for (i = 0; i < 1000; i++) { x = Math.random() * width / pixcelSize | 0; // |0 to Int32 y = Math.random() * height / pixcelSize| 0; for(j=0;j < pixcelSize; j++){ for(k=0;k < pixcelSize; k++){ setPixel( imageData, { x: x * pixcelSize + j, y: y * pixcelSize + k, r: 0 | 0, g: 0 | 0, b: 0 * 256 | 0, a: 255 // 255 opaque }); } } } c.putImageData(imageData, 0, 0);
在这里工作示例
您可以通过对canvas对象应用CSS转换来实现消除锯齿效果：
<style> canvas { transform: scale(0.5); } </style>
但是，这可能会干扰连接到canvas上的任何与鼠标位置相关的事件。
