学习HTML5 canvas第一天

iLove9ouHenry

于 2015-06-13 15:22:31 发布

阅读量406

点赞数

分类专栏： php

本文链接：https://blog.csdn.net/minjun0901/article/details/46482823

版权

php 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #mycanvas {
            width: 500px;
            height: 300px;
            border:1px  solid red;
        }
    </style>


</head>
<body>

<canvas id = 'mycanvas'>
</canvas>
<script>
window.onload = function()
{
    var context = createContext("mycanvas");
    drawCircle(context,10,10,20,true)
}

</script>

<script src ='lib.js'></script>
</body>
</html>

/**
 * 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();
    }
}

iLove9ouHenry

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习HTML5 canvas第一天

#mycanvas { width: 500px; height: 300px; border:1px solid red; } window.onload = function(){ var context = createContext("mycanvas");
复制链接

扫一扫