美文网首页
2021-12-20

2021-12-20

作者: 狗子吖 | 来源:发表于2021-12-21 00:02 被阅读0次

HTML5学习笔记

input标签

  • 新增placeholder

  • calendar日历类

    <form action="">
    <input type="date">
    <input type="time">
    <input type="week">
    <input type="datetime-local">
    <br>
    <input type="number">
    <input type="email">
    <input type="color">
    <input type="range" min="1" max="100">
    <input type="search" name="search">
    <input type="url">
    <input type="submit">
</form>

contenteditable

<div contenteditable="true";>wangs</div>
//行间属性，可用于设置可编辑的表格。

标签内容可编辑，该属性可以继承。连元素内部的标签都能被删除

dragable

<div draggable="true" class="drag"></div>

标签可以拖拽。a标签，img标签自带拖拽属性。所有的标签，拖拽周期结束时，默认回到原处。拖拽的生命周期--->拖拽开始->拖拽中->拖拽结束。

拖拽的物体<--------------------->目标区域

拖拽物体

  • ondragstart，鼠标按下瞬间不会触发这个事件，移动的瞬间触发。<dataTransfer>属性。只能在ondragstart里面设置。e.dataTransfer.effectAllowed=’link‘；。。。copy、move、all、copymove、linkmove
  • ondrag，拖拽的时候一直触发
  • ondragend，鼠标抬起时触发
  • 通过拖拽事件实现物体的拖拽

目标区域

  • ondargenter，拖拽的鼠标进入目标区域时触发
  • ondragover，拖拽的鼠标在目标区域上空时不停触发
  • ondragleave，拖拽的鼠标离开目标区域时触发
  • ondrop，需要阻止ondragend之后的默认事件才能触发(默认回到原处)。在enter事件之后只能被触发一次。需要leave触发后再次触发enter才能触发下一次。<e.dataTransfer.dropEffect>只能设置在drop事件里

当被拖拽的物体在目标区域内部时，被拖拽物体必须在最上层才能被拖拽。并且，被拖拽物体所遮挡的部分不属于目标区域

ondragend事件在整个拖拽过程中最后被触发。要想阻止他的默认事件，需要在他的上一个事件中阻止！

语义化标签

<header></header>
<footer></footer>
<nav></nav>
<article></article>-->文章，可以直接被引用的
<section></section>章节
<aside></aside>

本质上都是div

canvas——画板

  • 用js操纵去画东西
<canvas id='can' width='500px' height='400px'></canvas>//HTML当中需要有canvas标签.canvas画板的宽高需要在行间设置，否则会导致画笔定位不准

JS部分

画线、设置线宽、画线颜色、填充颜色

var can=document.getElementById('can');//获取canvas元素
var ctx=can.getContext('2d');//开启画布
    ctx.moveTo(10,10);//moveTo设置起点为（10,10）
    ctx.lineTo(50,50);//lineTo设置第一笔终点为（50,50）
    ctx.lineTO(50,100);//lineTo设置第二笔终点为（50,100）
    ctx.closePath();//闭合
    ctx.stroke();//画线

    ctx.beginPath();//开始新的笔画
    ctx.lineWidht=5;//设置笔画的粗细
    ctx.moveTo(50, 100);
    ctx.lineTo(100, 150);
    ctx.lineTo(180, 200);
    ctx.fill();//填充。默认黑色
    ctx.stroke();//画线
//同一个笔画中只能设置一次粗细

    ctx.linewidth=2.0;//线宽
    ctx.strokeStyle="red";//线条颜色
    ctx.fillStyle='blue';//填充颜色，先设置再画线、填充，设置是全局的，后续操作需要更改

画矩形、圆形

//画矩形
ctx.rect(0,0,100,100);//设置左顶点坐标（0,0），长宽100
ctx.stroke();//绘制图形

ctx.rect(120,0,100,100);//
ctx.fill();//填充
ctx.stroke();//

ctx.strokeRect(0,120,100,100);//直接画一个矩形

ctx.fillRect(120,120,100,100);//直接画一个被填充的矩形

ctx.beginPath()方法和ctx.fill()之间绘制的所有图形都将被填充，除了类似strokeRect()这种方法直接画出的图形。

ctx.arc(100,100,r,0,Math.PI/2,0)
//参数：圆心坐标（100,100），半径r，弧度（起始0rad，结束π/2rad）方向：顺时针0，逆时针1。角度采用弧度制：弧长与半径之比度量对应圆心角角度的方式。
ctx.arc(100, 100, 50, 0,Math.PI * 2, 2);//画一个圆
ctx.stroke();

画圆角矩形

  • 参数：直线起点、终点、弧度半径、圆弧的方向
//moveTo确定起点坐标，
ctx.moveTo(100,100);
ctx.arcTo(200,100,200,50,50);
ctx.stroke();
说明：点B（200,100）和点A（100,100）、点C（200,50）连接，形成两条射线BA、BC。圆D为这两条射线的内切圆。D与BA相切于点E，与BC相切于点F。弧线AEF即为arcTo所画图形。
arcTo.png

当C点位置发生变化时，弧线AEF可能也会发生变化

arcTo1.png

当线段BE（=BF）> BA时，弧线断将变形

arcTo2.png 
<body>
    <canvas id="can" width="800px" height="600px"></canvas>
    <div class="btn">
        <button class="">半径R变大</button>
        <button class="">半径R减小</button>
        <button class="">C点左移</button>
        <button class="">C点右移</button>
        <button class="">C点上移</button>
        <button class="">C点下移</button>
    </div>
    <script type="text/javascript">
        var can = document.getElementById('can');//获取canvas元素
        var ctx = can.getContext('2d');//开启画布
        var r = 50;
        var x=0,y=0;
        var btnList=document.querySelectorAll('div>button');
        
        function paint(){
            ctx.clearRect(0,0,800,600);
            ctx.beginPath();
            ctx.lineWidth=1;
            ctx.moveTo(0,300+r);
            ctx.lineTo(400+r,300+r);
            ctx.lineTo(400+r,0);
            ctx.stroke();
            
            // 画参考圆
            ctx.beginPath();
            ctx.arc(400,300,r,0,2*Math.PI,0);
            ctx.stroke();

            // 画带弧 线
            ctx.beginPath();
            ctx.lineWidth=3;//将arcTo画出来的线加粗
            // ctx.lineStyle="red";
            ctx.moveTo(200,300+r);//A点
            ctx.arcTo(400+r,300+r,400+r+x,0+y,r);//B点、C点
            ctx.lineTo(400+r,300+r);
            ctx.stroke();

            ctx.beginPath();
            ctx.lineWidth=1;
            ctx.moveTo(400+r,300+r);
            ctx.lineTo(400+r+x,0+y);
            ctx.stroke();
            console.log('(x:'+(400+r+x)+',y:'+y+')');
        }
        paint();
        btnList[0].onclick=function(){
            r++;
            paint();
            console.log(r);
        }
        btnList[1].onclick=function(){
            r--;
            paint();
            console.log(r);
        }
        btnList[2].onclick=function(){
            x-=10;
            paint();
        }
        btnList[3].onclick=function(){
            x+=10;
            paint();
        }
        btnList[4].onclick=function(){
            y-=10;
            paint();
        }
        btnList[5].onclick=function(){
            y+=10;
            paint();
        }
    </script>
</body>

canvas的平移、旋转、伸缩

ctx.translste(x,y);//坐标 |将点（x，y）设为坐标原点，在这个方法之后，所有用到坐标的操作都相对于（x，y）
ctx.rotate(rad);//弧度 |将坐标系旋转对应弧度
ctx.scale();// |将坐标系的刻度进行缩放

以上三个方法需要在你想进行变换的图形之前调用。调用之后会改变坐标系的方向或者刻度，后续的所有操作都会基于这个变化实现。如果想消除这个影响，需要结合ctx.save 和ctx.restore实现。

使用ctx.save 将当前的坐标系变换数据保存下来。可以保存平移，旋转、缩放状态。使用ctx.resotre方法，恢复之前保存的变换状态。

canvas背景填充

  • 线性渐变
var bg = ctx.createLinearGradient(0,0,400,0);//创建线性渐变并设置规则。沿着点（0,0）向点（400,0）进行线性渐变
    bg.addColorStop(0,'#ff0');//设置渐变颜色断点
    bg.addColorStop(0.3,'yellow');//
    bg.addColorStop(0.5,'#00f')''//
    bg.addColorStop(0.8,'red');//
    bg.addColorStop(1,'#abcdef');//
    ctx.fillStyle = bg;//将设置好的线性渐变设置为填充样式
    ctx.fillRect(0, 0, 400, 400);//填充并绘制方形
  • 径向渐变
<style>
    canvas {
        border: 1px solid;
    }

    span {
        background-color: #abcdef;
        display: block;
        width: 400px;
        height: 50px;
        margin-bottom: 20px;
        text-align: center;
        line-height: 50px;
    }

    .show {
        position: absolute;
        left: 600px;
        top: 300px;
    }

    .color {
        position: absolute;
        top: 30px;
        left: 600px;
    }
</style>

<body>
    <canvas id="can" width="500px" height="500px"></canvas>
    <div class="btn">
        <button class="">半径R+5</button>
        <button class="">半径R-5</button>
        <button class="">半径R1+10</button>
        <button class="">半径R1-10</button>
        <button class="">圆1圆心xy+10</button>
        <button class="">圆1圆心xy-10</button>
        <button class="">圆2圆心xy+10</button>
        <button class="">圆2圆心xy-10</button>
    </div>
    <div class="color">
        <span>
            rbg.addColorStop(0, 'red');
        </span>
        <span>
            rbg.addColorStop(0.5, 'yellow');
        </span>
        <span>
            rbg.addColorStop(0, 'blue');
        </span>
    </div>
    <div class="show">
        <span class="">rbg = ctx.createRadialGradient(x, x, r, y, y, r1)</span>
        <span class="">圆1圆心的坐标（0,0）半径R=50</span>
        <span class="">圆2圆心的坐标（0,0）半径R1=60</span>
    </div>
    <script type="text/javascript">
        var can = document.getElementById('can');//获取canvas元素
        var r = 50, r1 = 60;
        var x = 0, y = 0;
        var btnList = document.querySelectorAll('div>button');
        var ctx = can.getContext('2d');//开启画布

        var spanList = document.querySelectorAll('.show>span');
        paint();
        function paint() {
            ctx.clearRect(0, 0, 500, 500);
            ctx.beginPath();
            var rbg = ctx.createRadialGradient(x, x, r, y, y, r1);
            rbg.addColorStop(0, 'red');
            rbg.addColorStop(0.5, 'yellow');
            rbg.addColorStop(1, 'blue');
            ctx.fillStyle = rbg;
            ctx.fillRect(0, 0, 400, 400);
            spanList[1].innerText = `圆1圆心的坐标（${x},${x}）半径R=${r}`;
            spanList[2].innerText = `圆2圆心的坐标（${y},${y}）半径R=${r1}`;
            ctx.beginPath();
            ctx.arc(x, x, r, 0, 2 * Math.PI);
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(y, y, r1, 0, 2 * Math.PI);
            ctx.stroke();
        }

        btnList[0].onclick = function () {
            r += 5;
            paint();
        }
        btnList[1].onclick = function () {
            r -= 5;
            r = r < 0 ? 0 : r;
            paint();
        }
        btnList[2].onclick = function () {
            r1 += 10;
            paint();
        }
        btnList[3].onclick = function () {
            r1 -= 10;
            r1 = r1 < 0 ? 0 : r1;
            paint();
        }
        btnList[4].onclick = function () {
            x += 10;
            paint();
        }
        btnList[5].onclick = function () {
            x -= 10;
            paint();
        }
        btnList[6].onclick = function () {
            y += 10;
            paint();
        }
        btnList[7].onclick = function () {
            y -= 10;
            paint();
        }
    </script>
</body>

var rbg = ctx.createRadialGradient(x, x, r, y, y, r1);正常来讲，点（x,x）为内圆（圆1）圆心坐标，r为其半径；点（y,y）外圆（圆2）圆心坐标，r1是其半径。

  • 当圆1圆2为同心圆，即x=y时，正常情况 r<r1。那么圆1内部将全部填充为rbg.addColorStop(0, 'red');断点为0的颜色。圆1与圆2形成的圆环区域按照addColorStop()设置的规则填充。在圆2外面和要填充的图形之间全部显示为addColorStop()断点为1的颜色。

    如果r=r1,填充失效

    如果r>r1,相当于将addColorStop()设置的颜色填充顺序逆反

接下分析特殊情况：

  1. 当 == r < r1 == 时

  • 当圆1在圆2内部时。如图1


    径向渐变1.png
  • 当圆1部分在圆2 内部。如图2
径向渐变2.png

图3

径向渐变3.png

图4===>两个圆不相交

径向渐变4.png

图5===>不相交

径向渐变5.png

规律看图吧，懒得写了。词穷归纳不出来。。。

相关文章

网友评论

      本文标题：2021-12-20

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

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|2021-12-20|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！