HTML5 toile et anti-aliasing
Comment faire pour activer le anti-aliasing sur un toile .
le code suivant Ne trace pas une ligne lisse:
var context = mainCanv.getContext("2d");
if (context) {
context.moveTo(0,0);
context.lineTo(100,75);
context.strokeStyle = "#df4b26";
context.lineWidth = 3;
context.stroke();
}
6 réponses
ne peut pas être activé ou désactivé, et est contrôlé par le navigateur.
vous pouvez traduire canvas par demi-pixel distance.
ctx.translate(0.5, 0.5);
initialement le point de positionnement de la toile entre les pixels physiques.
Je n'ai pas eu besoin d'activer l'anti-alias car il est activé par défaut mais j'ai dû l'éteindre. Et si elle peut être désactivé, il peut également être activée.
ctx.imageSmoothingEnabled = true;
Je l'éteins habituellement quand je travaille sur ma toile rpg donc quand je zoome dans les images ne semblent pas flou.
voici un contournement qui vous oblige à dessiner des lignes pixel par pixel, mais qui empêchera l'alias anti.
// 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
}
}
en gros, vous trouvez la longueur de la ligne, et étape par étape parcourez cette ligne, en arrondissant chaque position, et en remplissant un pixel.
appelez-le avec
var context = cv.getContext("2d");
drawLineNoAliasing(context, 20,30,20,50); // line from (20,30) to (20,50)
c'est maintenant 2018, et nous avons enfin des moyens bon marché pour faire quelque chose autour de lui...
en effet, puisque l'API de contexte 2d a maintenant une propriété filter
, et que cette propriété de filtre peut accepter SVGFilters , nous pouvons construire un SVGFilter qui ne conservera que des pixels complètement opaques de nos dessins, et donc éliminer l'anti-aliasing par défaut.
donc il ne désactivera pas l'antialiasing en soi, mais fournit un moyen bon marché à la fois en termes de mise en œuvre et de performances pour supprimer tous les pixels semi-transparents lors du dessin.
Je ne suis pas vraiment un spécialiste des SVGFilters, donc il pourrait y avoir une meilleure façon de le faire, mais pour l'exemple, je vais utiliser un <feComponentTransfer>
noeud pour saisir seulement les pixels complètement opaques.
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#ABEDBE';
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fillStyle = 'black';
ctx.font = '14px sans-serif';
ctx.textAlign = 'center';
// first without filter
ctx.fillText('no filter', 60, 20);
drawArc();
drawTriangle();
// then with filter
ctx.setTransform(1, 0, 0, 1, 120, 0);
ctx.filter = 'url(#remove-alpha)';
// and do the same ops
ctx.fillText('no alpha', 60, 20);
drawArc();
drawTriangle();
// to remove the filter
ctx.filter = 'none';
function drawArc() {
ctx.beginPath();
ctx.arc(60, 80, 50, 0, Math.PI * 2);
ctx.stroke();
}
function drawTriangle() {
ctx.beginPath();
ctx.moveTo(60, 150);
ctx.lineTo(110, 230);
ctx.lineTo(10, 230);
ctx.closePath();
ctx.stroke();
}
// unrelated
// simply to show a zoomed-in version
var zCtx = zoomed.getContext('2d');
zCtx.imageSmoothingEnabled = false;
canvas.onmousemove = function drawToZoommed(e) {
var x = e.pageX - this.offsetLeft,
y = e.pageY - this.offsetTop,
w = this.width,
h = this.height;
zCtx.clearRect(0,0,w,h);
zCtx.drawImage(this, x-w/6,y-h/6,w, h, 0,0,w*3, h*3);
}
<svg width="0" height="0" style="position:absolute;z-index:-1;">
<defs>
<filter id="remove-alpha" x="0" y="0" width="100%" height="100%">
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0 1"></feFuncA>
</feComponentTransfer>
</filter>
</defs>
</svg>
<canvas id="canvas" width="250" height="250" ></canvas>
<canvas id="zoomed" width="250" height="250" ></canvas>
Et pour ceux qui n'aiment pas ajouter un <svg>
élément dans leur DOM, vous pouvez également le sauvegarder en tant que fichier svg externe et définir la propriété filter
à path/to/svg_file.svg#remove-alpha
.
si vous avez besoin de contrôle du niveau de pixel sur la toile, vous pouvez le faire en utilisant createImageData et putImageData .
HTML:
<canvas id="qrCode" width="200", height="200">
QR Code
</canvas>
Et 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);