美文网首页工作生活
【学习日记】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的入门

    此文章只是个人记录学习用的,如果写的不好或者有什么不对的地方还请各位大神指点一下 //初始化一个画布,包括HTML...

  • HTML5-----Canvas 学习日记1

    HTML5-----Canvas 学习日记1 1:我们经常提到canvas,其实canvas是HTML中一个元素,...

  • canvas入门-小时钟

    canvas入门-小时钟

  • canvas实现时钟效果

    HTML5的canvas的实用入门小实例,一步步一起来。学习的最好方法就是实践,参考HTML 5 Canvas 参...

  • HTML5---------Canvas 的学习日记2

    HTML5---------Canvas 的学习日记2 1:绘制矩形 1:直接用strokeRect,fillRe...

  • canvas入门

    标签插入 获取标签var canvas = document.getElementById('canvas');获...

  • canvas 入门

    绘制倒计时时钟 1 绘制一条线 然后利用刚学的线条绘制个七巧板 2 绘制弧线 canvas 中的方法 圆的起始状态...

  • canvas入门

    一、什么是 canvas? HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成可以...

  • canvas入门

    日期:2020 年 5 月 8 日 canvas 学习笔记 canvas 简介 canvas 是一个用来绘图的 h...

  • Canvas入门

    是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.例如,它可以用于绘制图表、制作图片构...

网友评论

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

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