this is jsscript tutorial for Canvas fuction.
it can create one draw object in web browser.
i tried to make a circle in fallowing code by Canvas function.
<html>
<head>
<script type="text/javascript">
var i=0.0;
function displayDate() {
var myCars = new Array(); // regular array (add an optional integer)
document.getElementById("demo").innerHTML = Date() + "The number is " + i + "<br />";
//fillRect() START
var canvas = document.getElementById('c1');
if (!canvas || !canvas.getContext) { return false; }
var ctx = new Array();
//利用小圓畫圓 圓的方程式
for (j = 1; j < 10; j++) {
ctx[j] = canvas.getContext('2d');
ctx[j].arc(200 + Math.cos((i - 90) / 180 * Math.PI) * 50 * j, 200 + Math.sin((i - 90) / 180 * Math.PI) * 50 * j, 1, 0, Math.PI * 2, true);
ctx[j].fill();
//ctx[j].save();
//ctx[j].translate(i + 3, i + 3);
}
//set time LifeCircle
if (i > 360) { return false; }
i = i+1;
settimeID = setTimeout("displayDate()", 1);
}
</script>
</head>
<body>
<h1>My First Web Page</h1>
<p id="demo">This is a paragraph.</p>
<button type="button" onclick="displayDate();">Display Date</button>
<button type="button" onclick="clearTimeout(settimeID);">Stop All</button>
<h2>fillRect()</h2>
<div>
<canvas id="c1" width="600" height="600" ></canvas>
</div>
</body>
</html>
No comments:
Post a Comment