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>