为何不能绘制直线？

Question

为何没有直线出现？

<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();

    }

    

    

分别用chrome firefox 打开jsfiddle,没有直线出现？ 

Answer 1

看截图的样式，我觉得题主用的是jsfiddle，我在runjs上都正常运行，试了一下jsfiddle，发现不行的原因了。看起来jsfiddle是把用户定义的js包裹在window.onload里 如截图所示，也就是页面加载完成调用的是外层的onload，内层对onload重新赋值已于事无补。把window.onload去掉，jsfiddle预览就正常了……