為什么我只畫出了畫布,沒畫出線啊???反復對了幾遍也沒看出和老師寫的有啥區別?求高人指點
<!DOCTYPE html>
<html>
<head>
? <meta charset="utf-8">
? <title>Canvas 特效</title>
</head>
<body>
? <canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa; display:block; margin:50px auto;" > </canvas>
? <script>
? ? ?window.onload = function(){
? ? ? ? ? ?var canvas = document.getElementById("canvas");
? ? ? ? ? ?var cantext = canvas.getContext("2d")
? ? ? ? ? ?context.moveTo(100,100)
? ? ? ? ? ?context.lineTo(700,700)
? ? ? ? ? ?context.stroke()
? ? ?}
? </script>
</body>
</html>
2015-01-22
2015-01-22
<!DOCTYPE?html> <html> <head?lang="en"> ????<meta?charset="UTF-8"> ????<title>1</title> </head> <body> <canvas?id="canvas"?style="border:1px?sliod?#aaa;display:?block;margin:?50px?auto;"> ????請更換瀏覽器后再試~~~ </canvas> <script> ????var?tangram=[ ????{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff87"}, ????{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#ffffff"}, ????{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"}, ????{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"}, ????{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"}, ????{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"}, ????{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"} ????] ????window.onload=function(){ ????????var?canvas=document.getElementById("canvas"); ????????canvas.width=800; ????????canvas.height=800; ????????var?context=canvas.getContext("2d"); ????????for(var?i=0;i<tangram.length;i++) ????????????draw(tangram[i],context) ????} ????function?draw(piece,cxt){ ????????cxt.beginPath(); ????????cxt,moveTo(piece.p[0].x,piece.p[0].y); ????????for(var?i=0;i<piece.length;i++) ????????????cxt.lineTo(piece.p[i].x,piece.p[i].y); ????????cxt.closePath(); ????????cxt.fillStyle=piece.color; ????????cxt.fill(); ????????cxt.strokeStyle="black" ?cxt.lineWidth=3 ?cxt.stroke(); ????} </script> </body> </html>2014-12-02
終于找到原因了,原來是 ?var canvas = document.getElementById("canvas"); 出現了中文的括號。肉眼真的很難分辨啊
2014-12-02
<html>
<head>
? <meta charset="utf-8">
? <title>Canvas 特效</title>
</head>
<body>
? <canvas id="canvas" width="1024" height="768" ?style="border:1px solid #aaa; display:block; margin:50px auto;" > </canvas>
? <script>
? ? ?window.onload = function(){
? ? ? ? ? ?var canvas = document.getElementById("canvas");
? ? ?
? ? ? ? ? ?var context = canvas.getContext("2d");
? ? ? ? ? ?context.moveTo(100,100)
? ? ? ? ? ?context.lineTo(700,700)
? ? ? ? ? ?context.stroke()
? ? ?}
? </script>
</body>
</html>
修改了 context,但是還是畫不出來,并且我發現把寬度和高度代碼放到<script>里面后沒有生效,感覺現在整個<script>都沒有生效,但是沒找到原因,請高人指點
2014-12-01
cantext和context