HTML 5 canvasの勉強初日
1721 ワード
<style type="text/css">
#mycanvas {
width: 500px;
height: 300px;
border:1px solid red;
}
</style>
<canvas id="mycanvas">
</canvas>
<script>
window.onload = function()
{
var context = createContext("mycanvas");
drawCircle(context,10,10,20,true)
}
</script>
<script src="lib.js"/>
</code></pre>
<br/>
<pre><code>/**
* Created by Administrator on 15-6-13.
*/
function $(id)
{
return document.getElementById(id)
}
function createContext(id)
{
var node = $(id);
if (node != null && node != undefined)
{
var context = node.getContext("2d");
return context;
}
return null;
}
function drawCircle(context,radis, x, y,isFill)
{
if (context != null) {
context.beginPath();
context.arc(x, y, radis, 0, 2 * Math.PI);
if (isFill == true)
{
context.fillStyle = "black";
context.fill();
}
else
{
context.strokeStyle = "green"
context.stroke()
}
context.closePath();
}
}
function drawSqure(context,radis, x, y)
{
if (context != null)
{
context.beginPath();
context.arc(x,y,radis,0, 2*Math.PI);
context.strokeStyle = "green"
context.stroke()
context.closePath();
}
}</code></pre>
<br/>
</div>
</div>
</div>
</div>