• (一)canvas简介


    <canvas>元素主要用来图形的绘制,通过脚本来完成(通常时js来实现);
    可以利用其实现图表,游戏等项目的开发。
    • getContext
      • 获取画布的摸板是2d还是3d
    • strokeRect(x,y,w,h);
      • 四个参数: x轴,y轴,宽度,高度
      • 主要用来设置边框,可以理解为border
    • fillRect(x,y,w,h);
      • 四个参数:x轴,y轴,宽度,高度
      • 主要用来设置内容盒子,可以理解为div
    注:
    • canvas是h5新增标签,兼容性问题可以卸载canvas标签中来进行处理,
    • 宽度和高度的设置需要写成行内样式
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>canvas</title>
    </head>
    <style>
    body {
    background-color: black;
    }
    #c1 {
    background: #fff;
    }
    </style>
    <body>
    <!--canvas标签的大小需要写成内敛样式-->
    <canvas id="c1" width="400" height="400">兼容处理:在这里的代码是看不见的,不支持canvas的浏览器是可以看到的</canvas>
    <script>
    var oC = document.getElementById("c1");
    var ctx = oC.getContext("2d");
    // ctx.fillRect(0,0,100,100);//四个参数下x,y,w,h 默认颜色为黑色
    ctx.strokeRect(50,100,100,100);//默认颜色为黑色,默认边框大小1px
    </script>
    </body>
    </html>
  • 相关阅读:
    Python 基础之函数初识与函数参数
    python 基础之浅拷贝与深拷贝
    Python 基础之集合相关操作与函数和字典相关函数
    Python 基础之字符串操作,函数及格式化format
    Rocket
    Rocket
    Rocket
    Rocket
    Rocket
    Rocket
  • 原文地址:https://www.cnblogs.com/bgwhite/p/9406780.html
Copyright © 2020-2023  润新知