0
135
VistasComportamiento impredecible del lienzo HTML
Observo un comportamiento extraño del lienzo HTML tanto en Chrome como en Firefox. Por alguna razón, hay una línea pálida de un píxel de ancho cuando relleno el rectángulo sobre el rectángulo más pequeño de diferente color después del recorte.
Aquí está el fragmento de violín de JS: https://jsfiddle.net/srkgbxw1/7/
var my_canvas = document.getElementById('canvas'), context = my_canvas.getContext("2d"); context.translate(0.5, 0.5) context.fillStyle = "orange"; context.fillRect(10,10,100,100); context.beginPath(); context.rect(20,20,90,90); context.clip(); context.fillStyle = "white"; context.fillRect(0,0,110,110); context.fillStyle = "orange"; context.fillRect(0,0,190,190); Este es el resultado: 
Por favor, ayúdenme a averiguar cuál es el motivo de la línea pálida después del tercer fillRect con naranja.
UPD : la pregunta original cambió después de que me señalaron que había cometido un error estúpido en su primera edición
UPD 2 Obtuve la respuesta, esto sucede debido a la interpolación de color en los bordes de la región de recorte porque el contexto se tradujo para medio píxel, lo que se hizo para obtener líneas finas (técnica recomendada). Para evitar la interpolación, la región de recorte debe ajustarse también en medio píxel, luego la línea pálida desaparece.
1 Respuestas
Responde la pregunta0
Si miras en los registros:
TypeError: context.setStrokeStyle is not a functionPor lo tanto, cuando lo comenta, todo lo que sigue se ejecuta, mientras que cuando lo descomenta, falla y todo lo que sigue a esta línea no se ejecuta.
EDITAR: Para el segundo problema de la pregunta:
El problema es equivalente a esto, por qué el cuadrado azul no se superpone completamente al cuadrado rojo:
context.translate(0.5, 0.5); context.fillStyle = "red"; context.fillRect(10,10,100,100); context.fillStyle = "blue"; context.fillRect(10,10,100,100);Debido a la traducción, ahora está dibujando en píxeles flotantes, todo se movió medio píxel. Le sugiero que lea esto para obtener más información sobre cómo se maneja: fillRect() no se superpone exactamente cuando se usan números flotantes
Eliminando context.translate(0.5, 0.5); elimina la "línea pálida".