javascript - 為何不能繪制直線？

問題描述

為何沒有直線出現？

<canvas 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,沒有直線出現？

問題解答

看截圖的樣式，我覺得題主用的是jsfiddle，我在runjs上都正常運行，試了一下jsfiddle，發現不行的原因了。

看起來jsfiddle是把用戶定義的js包裹在window.onload里 如截圖所示，也就是頁面加載完成調用的是外層的onload，內層對onload重新賦值已于事無補。

把window.onload去掉，jsfiddle預覽就正常了……

chrome和ieedge測過了，都可以出現直線。你代碼沒問題你再看看其他原因