• HTML5


    一:HTML5新增的属性

    HTML目录:

       1、新增的标签
            语义化标签
            canvas(画板)
            svg
            audio(音频播放)
            video(视频播放)
        2、新增的属性
            placeholder
            calendar,date time email url search
            ContentEditable
            Draggable
            Hidden
            Context-menu
            Data-val(自定义属性)
        3、api
            定位(需要地理位置的功能)
            重力感应(陀螺仪)
            request-animation-frame(动画优化)
            History(控制当前页面的历史记录)
            LocalStorage,SessionStorage(存储信息,比如:历史的最高纪录)
            WebSocket(在线聊天,聊天室)
            FileReader(文件读取,预览)
            WebWorker(文件的异步,提升性能,提升交互体验)
            Fetch(传说中的ajax)
    1、input新增的属性,有些浏览器支持,有些不支持,使用在form表单里面
         <form action="">
                <input type="date">//显示年月日<!--chrome支持,Safari,IE不支持-->
                <input type="time">//显示早中晚+几点<!--chrome支持,Safari,IE不支持-->
                <input type="week">//显示年+第几周<!--chrome支持,Safari,IE不支持-->
                <input type="datetime-local">//显示年月日,早中晚+几点<!--显示时间和日期,chrome支持,Safari,IE不支持-->
                <input type="number">//<!--chrome支持,Safari,IE不支持-->
                <input type="email">//<!--chrome,火狐支持,Safari,IE不支持-->
                <input type="color">//<!--chrome支持,Safari,IE不支持-->
                <input type="range" min="1" max="100">//<!--chrome,Safari支持,火狐IE不支持-->
                <input type="search">//<!--chrome支持,Safari支持一点,IE不支持-->
                <input type="url">//<!--chrome,火狐支持,Safari,IE不支持-->
                <input type="submit">
            </form>

    2、contenteditable="true",可编辑的

    <div contenteditable="true">aa</div>//<!-- 可编辑的,没有兼容问题,本身没有可以继承父级-->

    3 、a和img标签默认是可拖拽的,其余的加draggable可拖拽,拖拽的生命周期:1、拖拽开始,拖拽进行中,拖拽结束;2、拖拽的物体,目标区域

    <div class="wrap" draggable="true">//</div><!-- chrome,Safari支持,firefox不支持-->4

    4、canvas

        // var ctx = canvas.getContext("2d");获取画笔
        // ctx.stroke();把画笔显示出来
        // ctx.moveTo(100, 100);//起点
        // ctx.beginPath();开始新一条路径
        // ctx.lineWidth=10;线条的宽度
        // ctx.closePath();//闭合
        // // ctx.fill();//填充颜色
    // 画矩形的方法
        // ctx.rect(100,100,100,100);ctx.stroke();
        // ctx.strokeRect(100,100,100,100);
        // ctx.fillRect(100,100,100,100);填充颜色的矩形
        // ctx.moveTo(100, 100);//起点 ctx.lineTo(200, 100);ctx.lineTo(200,200);ctx.lineTo(100,200); ctx.lineTo(100,100);ctx.stroke();
        // ctx.moveTo(100, 100);//起点 ctx.lineTo(200, 100);ctx.lineTo(200,200);ctx.lineTo(100,200);ctx.closePath();

    列子:下落的小方块

    canvas {
                 500px;
                height: 300px;
                border: 1px solid darkcyan;
            }
    <canvas id="can" width="500px" height="300px"></canvas>
    // 下落的小方块
        var height = 100;
        var timer = setInterval(function () {
            ctx.clearRect(0, 0, 500, 300);//清除之前画的
            ctx.fillRect(100, height, 50, 50);
            height+=2;
        }, 50);
     // 画圆 (圆心(x,y),半径(r)弧度(起始弧度,结束弧度)方向(顺时针0,逆时针1))
        ctx.arc(100,100,50,Math.PI*2,0);
        ctx.stroke();
        // 吃东西形状
        ctx.arc(100,100,50,0,Math.PI*1.8,0);
        ctx.lineTo(100,100);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
    // 画圆角矩形B(x,y) C(x,y)圆角大小
        ctx.moveTo(100,110);//起点
        ctx.arcTo(100,200,200,200,10);
        ctx.arcTo(200,200,200,100,10);
        ctx.arcTo(200,100,100,100,10);
        ctx.arcTo(100,100,100,200,10);
        ctx.stroke();

     贝塞尔曲线:

      // 二次贝塞尔曲线
        ctx.beginPath();
        ctx.moveTo(100, 100);
        ctx.quadraticCurveTo(200, 200, 300, 100);
        ctx.stroke();
    
        // 三次贝塞尔曲线
        ctx.beginPath();
        ctx.moveTo(100, 100);
        ctx.bezierCurveTo(200, 200, 300, 100,400,200);
        ctx.stroke();
        // 一个小波浪图
        var width = 500;
        var height = 300;
        var offset = 0;
        var num=0;
        var canvas = document.getElementById('can');
        var ctx = canvas.getContext("2d");
        setInterval(function () {
            ctx.clearRect(0, 0, 500, 300);
            ctx.beginPath();
            ctx.moveTo(0 + offset - 500, height / 2);
            ctx.quadraticCurveTo(width / 4 + offset - 500, height / 2 + Math.sin(num) * 120, width / 2 + offset - 500, height / 2);
            ctx.quadraticCurveTo(width / 4 * 3 + offset - 500, height / 2 - Math.sin(num) * 120, width + offset - 500, height / 2);
    
            ctx.moveTo(0 + offset, height / 2);
            ctx.quadraticCurveTo(width / 4 + offset, height / 2 + Math.sin(num) * 120, width / 2 + offset, height / 2);
            ctx.quadraticCurveTo(width / 4 * 3 + offset, height / 2 - Math.sin(num) * 120, width + offset, height / 2);
            offset += 2;
            offset %= 500;
            ctx.stroke();
            num+=0.01;
        }, 20);
      // 直线旋转,根据画布的原点
        ctx.rotate(Math.PI / 6);//根据画布的原点旋转
        ctx.moveTo(100, 100);
        ctx.lineTo(200, 100);
        ctx.stroke();
        // 根据坐标轴旋转
        ctx.translate(100, 100);//移动坐标系
        ctx.moveTo(0, 0);
        ctx.rotate(Math.PI / 6);//根据画布的原点旋转
        ctx.lineTo(100, 0);
        ctx.stroke();
        // 矩形缩放
        ctx.scale(2,2);//缩放x,y
        ctx.fillRect(100, 100,100,100);
        ctx.stroke();

    这个translate和scale是设置所有的图形,如果不想其他图形受到影响就要save保存一下原始数据,然后restore还原

     var canvas = document.getElementById('can');
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.save();// 存储当前的平移,旋转,缩放数据
        ctx.translate(100,100);//translate和rotate是全局的,只要第一个设置了translate和rotate,画第二个矩形的时候会跟着旋转的路劲画
        ctx.rotate(Math.PI / 4);
        ctx.strokeRect(0, 0, 100, 50);
        ctx.beginPath();
        ctx.restore();//恢复所有的平移和旋转,第二个矩形不是按原来的位置
        ctx.strokeRect(200, 0, 100, 50);

    颜色填充:

       var canvas = document.getElementById('can');
        var ctx = canvas.getContext("2d");
        // 第一种背景颜色填充
        ctx.fillStyle = "blue";
        ctx.fillRect(100, 100, 100, 50);
        ctx.stroke();
        // 第二种用图片填充,图片和纹理的填充是已原点填充的,所以要改变坐标系位置
        var img = new Image();
        img.src = './img/1.png';
        img.onload = function () {
            ctx.beginPath();
            ctx.translate(100,100);
            var bg = ctx.createPattern(img, 'no-repeat');//图片填充要创建纹理
            ctx.fillStyle = bg;
            ctx.fillRect(0, 0, 300, 100);
            ctx.stroke();
        }
        // 第三种渐变颜色填充,已原点填充的,所以要改变坐标系位置
        ctx.beginPath();
        var bg = ctx.createLinearGradient(0,0,200,0);//渐变颜色填充,x0,y0,x1,y1
        bg.addColorStop(0,'white');//起始颜色
        bg.addColorStop(1,'black');//终止颜色
        ctx.fillStyle = bg;
        ctx.translate(100,100);
        ctx.fillRect(0,0, 300, 100);
        ctx.stroke();
        // 第四种:辐射渐变
        ctx.beginPath();
        var bg = ctx.createRadialGradient(100, 100, 0, 100, 100, 100);//渐变颜色填充,x1,y1,半径,x2,y2,半径
        bg.addColorStop(0, 'red');
        bg.addColorStop(0.5, 'blue');
        bg.addColorStop(1, 'green');
        ctx.fillStyle = bg;
        ctx.fillRect(0, 0, 200, 200);
        // canvas阴影
        ctx.beginPath();
        ctx.shadowColor='green';//阴影颜色
        ctx.shadowBlur=100;//阴影大小
        ctx.shadowOffsetX=15;
        ctx.shadowOffsetY=15;
        ctx.fillRect(100, 100, 100, 100);

    在canvas里面绘制文字

        ctx.font = '30px Georgia';
        ctx.fillText("我爱你", 100, 100);//细字体,实心字体
        ctx.strokeText("我爱你", 150, 150);//租字体,空心字体

    线端样式:给线条的两端加修饰

      

        ctx.beginPath();
        ctx.moveTo(50,50);
        ctx.lineCap='round';//给线条两端添加样式,square正方形,round椭圆,butt原来的样子
        ctx.lineTo(150,50);
        ctx.lineWidth=10;
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(50,50);
        ctx.lineJoin='round';//给两个线条的相交点添加样式,round圆角,bevel相交两个点砍掉,miter尖锐的
       ctx.miterLimit=5;//限制尖锐的长度 ctx.lineTo(150,50); ctx.lineTo(150,150); ctx.lineWidth=10; ctx.stroke();

    5、svg:放大,不会失真,适合大面积的贴图,通常动画较少或者简单,标签和css画。canvas:适合小面积的绘图,适合动画

     5.1、画线条

        .line1 {
                /* 显示线条 */
                stroke: darkcyan;
                stroke- 3px;
            }
            .line2 {
                stroke: darkblue;
                stroke- 2px;
            }
    <svg width="500px" height="300px" style="border:1px solid blue">
            <line x1="100" y1="100" x2="200" y2="100" class="line1"></line>
            <line x1="200" y1="100" x2="200" y2="200" class="line2"></line>
    </svg>

    5.2、画矩形

    <rect height="50" width="100" x="0" y="0" rx="10" ry="10"></rect> //rx是x方向的圆角,ry是y方向的圆<circle r="10" cx="20" cy="20"></circle>画圆(半径,x轴的圆心。y轴的圆心)<ellipse rx="100" ry="30" cx="200" cy="200"></ellipse>画椭圆(x半径,y半径,x位置,y位置)
    <polyline points="0 0,50 50,50 100,100 100,50 100"></polyline>画折线(起点,拐点,拐点...,终点),每一个点用空格隔开,点和点用逗号隔开
    //样式
    polyline{
                /* 不默认填充,添加自己想要的边框 */
                fill:transparent;
                stroke: darkblue;
                stroke- 3px;
           fill-opacity:0.2;//填充半透明
           stroke-opacity:0.1;//边框半透明
           stroke-linecap: round;
           stroke-linejoin: bevel;
    }
    <polygon points="0 0,50 50,50 100,100 100,100 50"></polygon>//polyline和polygon填充的时候是一样的,不填充的时候polyline不会闭合,polygon会闭合
    <text x="100" y="100">hello</text>//文本
  • 相关阅读:
    爱奇艺大数据招聘
    服务设计要解决的问题
    化腐朽为神奇:简明日志规范
    免费攻读人工智能专业,让自己的身价翻番
    JAVA日志的前世今生
    盖洛普Q12在团队中的应用
    漫画:鉴权与安全访问控制的技术血脉
    正确的git开发流程
    'Attempt to create two animations for cell' iOS
    Swift中的for循环基本使用
  • 原文地址:https://www.cnblogs.com/pengppp/p/11963575.html
Copyright © 2020-2023  润新知