problema de líneas de dibujo de etiquetas de lienzo & # 8230;

StackOverflow https://stackoverflow.com/questions/1232146

  •  22-07-2019
  •  | 
  •  

Pregunta

Tengo una etiqueta de lienzo, la uso para dibujar líneas en eso, El lienzo es un cuadrado. Yo uso "espacio" para grabar el espacio entre dos líneas. y tengo canvasWidth y canvasHight para registrar el tamaño del lienzo, en realidad, son el mismo numérico ... 320 

        var x=0;
        for (var i = 0; i < 5; i++) {
            x = parseInt(x + space);

            myCanvas.fillStyle = "rgb(200,0,0)";
            myCanvas.fillRect(x, 1, 1, canvasHeight);
            myCanvas.fillStyle = "rgb(0,200,0)";
            myCanvas.fillRect(1, x, canvasWidth, 1);

        }

Puedo usar el dibujo de todas las líneas rojas en el lienzo, pero las líneas verdes solo pueden dibujar dos en el lienzo, otras simplemente no pueden aparecer, Utilicé try {} catch, y no hay ningún error que desaparezca.

¿Fue útil?

Solución

¿Qué navegador estás usando?

El problema no parece estar en el código que ha mostrado, porque funciona bien para mí.

Aquí está mi ejemplo html: 

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" height="320" width="320" />

<script language="javascript">
var myCanvas = document.getElementById('myCanvas').getContext('2d');
var space = 10;
var x=0;
var canvasHeight = 320;
var canvasWidth = 320;
for (var i = 0; i < 5; i++) {
    x = parseInt(x + space);

    myCanvas.fillStyle = "rgb(200,0,0)";
    myCanvas.fillRect(x, 1, 1, canvasHeight);
    myCanvas.fillStyle = "rgb(0,200,0)";
    myCanvas.fillRect(1, x, canvasWidth, 1);

}
</script>

</body>
</html>

Otros consejos

¿Por qué usa parseInt, es su variable de espacio tiene tipo de cadena? De lo contrario, intente eliminar parseInt.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top