美文网首页工作生活
【学习日记】canvas的入门

【学习日记】canvas的入门

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

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

    //初始化一个画布,包括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>
    
    效果图

    持续更新ing

    相关文章

      网友评论

        本文标题:【学习日记】canvas的入门

        本文链接:https://www.haomeiwen.com/subject/mjtlhctx.html