【学习日记】canvas的入门

作者: 小黑马i | 来源:发表于2019-07-04 10:02 被阅读0次

【学习日记】canvas的入门
HTML5-----Canvas 学习日记1
canvas入门-小时钟
canvas实现时钟效果
HTML5---------Canvas 的学习日记2
canvas入门
canvas 入门
canvas入门
canvas入门
Canvas入门

此文章只是个人记录学习用的，如果写的不好或者有什么不对的地方还请各位大神指点一下

//初始化一个画布，包括HTML方面

    <head>
        <meta charset="utf-8">
        <title>【学习日记】canvas的入门</title>
        <style type="text/css">
            *{margin:0;padding: 0}
            #mycanvas{
                position: fixed;/*讲画布*/
                left: 0;        /*固定在*/
                right: 0;       /*页面的*/
                bottom: 0;      /*正中间*/
                top:0;          /*方便观看*/
                margin: auto;   
                border: 1px solid #ccc
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="600" height="400"></canvas>
    </body>
</html>

<script type="text/javascript">
    // 找到 <canvas> 元素
    var cv = document.getElementById("mycanvas");
    // 创建 context 对象
    var cva = cv.getContext("2d");
    //设置画笔颜色(CSS颜色，渐变，图案)
    cva.strokeStyle = "#00ff00"
    // 设置填充颜色(CSS颜色，渐变，图案)
    cva.fillStyle="#FF0000";
    // 设置笔触大小
    cva.lineWidth="6";
    // fillRect  绘制矩形
    // 用法  fillRect(矩形的左上角x的坐标,矩形的左上角y的坐标,矩形的宽,矩形的高)
    // 举个栗子
    cva.fillRect(10,10,100,100);
    // 或者使用rect  绘制空心圆
    cva.rect(10,10,100,100);
    cva.stroke();
</script>