问题描述:

http://codepen.io/Zulu/pen/Kztov here's the source code: why is this script running in codepen fine but not in the browsers?

Heya, i've been prototyping in codepen.io but now it's time to move it into a text-editor,

however for some reason the script doesn't run from the text editor in a browser, is codepen letting me get away with syntax errors? cause it runs fine in codepen

any help or suggestions are greatly appreciated.

 <!doctype html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="styling.css" />

<script>

alert("ahhhhg");

var c = document.getElementById("playground");

var ctx = c.getContext("2d");

//global scope

var i=0;

var c1 = []; //c is short for collect

var c2 = [];

var c3 = [];

var c4 = [];

var c5 = [];

var c6 = [];

var initiate = function(){ //the button that triggers the program

var timer = setInterval(function(){clock()},90); //copy this block for ref.

function clock(){

i+=1;

var a = Math.round(Math.random()*200);

var b = Math.round(Math.random()*250);

var c = Math.round(Math.random()*200);

var d = Math.round(Math.random()*250);

var e = Math.round(Math.random()*200);

var f = Math.round(Math.random()*250);

c1.push(a);

c2.push(b);

c3.push(c);

c4.push(d);

c5.push(e);

c6.push(f);

// document.write(i);

ctx.beginPath();

ctx.moveTo(c3[i-2], c4[i-2]);

ctx.bezierCurveTo(c1[i-2],c2[i-2],c5[i-2],c6[i-2],c3[i-1], c4[i-1]);

// ctx.lineTo(c3[i-1], c4[i-1]);

if(a<200){

ctx.strokeStyle="#FF33CC";

}

else if(a<400){

ctx.strokeStyle="#FF33aa";

}

else{

ctx.strokeStyle="#FF3388";

}

ctx.stroke();

document.getElementById("text-box").innerHTML=i+"<p>Thoughts.</p>";

if(i===20){

//alert("15 reached");

clearInterval(timer);//to clearInterval must be using a global scoped variable.

return;

}

}; //end of clock

//setInterval(clock,150);

var targetFace = document.getElementById("face");

var face = targetFace.getContext("2d");

var faceTimer = setInterval(function(){faceAnim()},80); //copy this block for ref.

function faceAnim(){

face.beginPath();

face.strokeStyle="#FF33CC";

face.moveTo(100,104); //eye line

face.bezierCurveTo(150,125,250,125,300,104);

face.moveTo(200,1); //centre line

face.lineTo(200,400);

face.moveTo(125,111);//left eye lid

face.bezierCurveTo(160,135,170,130,185,120);

face.moveTo(150,116);//left eye

face.bezierCurveTo(155,125,165,125,170,118);

face.moveTo(275,111);//right eye lid

face.bezierCurveTo(240,135,230,130,215,120);

face.moveTo(250,116);//right eye

face.bezierCurveTo(245,125,235,125,230,118);

face.moveTo(195, 118); //left nose

face.lineTo(190, 160);

face.lineTo(200,170);

face.moveTo(190,160); //left nostroll

face.lineTo(180,160);

face.lineTo(191,154);

face.moveTo(180,160); //left lower nostrol

face.lineTo(200,170);

face.moveTo(205, 118); //right nose

face.lineTo(210, 160);

face.lineTo(200,170);

face.moveTo(210,160); //right nostroll

face.lineTo(220,160);

face.lineTo(209,154);

face.moveTo(220,160); //right lower nostrol

face.lineTo(200,170);

face.moveTo(200,140); //outer triad

face.lineTo(170, 100);

face.lineTo(230, 100);

face.lineTo(200, 140);

face.moveTo(200,145); //outer triad drop shadow

face.lineTo(170, 100);

face.lineTo(230, 100);

face.lineTo(200, 145);

face.moveTo(200,130); //inner triad

face.lineTo(180, 105);

face.lineTo(220, 105);

face.lineTo(200, 130);

//face.lineWidth =0.6;

face.moveTo(280,111);//outer right eye lid

face.bezierCurveTo(240,140,230,135,210,120);

face.moveTo(120,111);//outer left eye lid

face.bezierCurveTo(160,140,170,135,190,120);

face.moveTo(162,174); //upper mouth line

face.bezierCurveTo(170,180,230,180,238,174);

face.moveTo(165,175); //mouth line bottom

face.bezierCurveTo(190,Math.floor(Math.random()*25+180),210,Math.floor(Math.random()*25+180),235,175);

face.moveTo(232,204); //head shape

face.lineTo(340, 20);

face.moveTo(168,204); //head shape

face.lineTo(60, 20);

face.stroke(); //exicute all co-ords.

}; //end of face anim

var clearFace = function(){

document.getElementById('face').getContext('2d').clearRect(0, 0, 700, 750);

};

setInterval(clearFace,90);

}; //end of parent function

</script>

</head>

<body>

<canvas id="playground" width="200px" height="250px">

</canvas>

<h2> <em>Fantastical place<br/>prototype</em> </h2>

<div id="button-box">

<button id="activate" onClick="initiate()" width="50px" height="50px" title="Activate"> </button>

</div>

<div id="text-box">

</div>

<canvas id="face" width="400px" height="200px">

</canvas>

</body>

</html>

网友答案:

The reason it works in codepen and not your page is because codepen places the code at the end of the document, before the closing body element. You're placing the code in the head of the document, and the browser is running the code (or trying to run it) before the elements exist on the page.

Either move your code to the end of the document, before the closing body tag, or wrap it in a window onload event wrapper (see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload).

相关阅读:
Top