javascript - Pourquoi ne puis-je pas tracer une ligne droite?

Question

Pourquoi n’y a-t-il pas de ligne droite ?

<canvas id="myCanvas" width="400" height="200">
canvas {
    border: 1px dashed black;
}

    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.lineWidth = 10;
        context.moveTo(0, 50);
        context.lineTo(400, 150);
        context.stroke();
    }
    
    

Utilisez Chrome Firefox pour ouvrir jsfiddle respectivement, mais aucune ligne droite n'apparaît ?

Answer 1

En regardant le style de la capture d'écran, je pense que la personne qui a posé la question a utilisé jsfiddle. Je l'ai exécuté normalement sur runjs. J'ai essayé jsfiddle et j'ai découvert pourquoi cela ne fonctionnait pas.

Il semble que jsfiddle enveloppe le js défini par l'utilisateur dans window.onload. Comme le montre la capture d'écran, c'est le onload externe qui est appelé après le chargement de la page, et la réaffectation de onload dans la couche interne n'aide pas.

Supprimez window.onload et l'aperçu de jsfiddle sera normal...

Answer 2

Je l'ai testé sur Chrome et ieedge, et les deux peuvent produire des lignes droites.
Il n'y a rien de mal avec votre code
Vous pouvez consulter d'autres raisons