js中的各种知识canvas API等

于 2020-07-16 15:49:35 发布
阅读量336 收藏 1
点赞数 1
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46910841/article/details/107305121
版权
本文详细探讨了JavaScript中的重要概念，包括事件委托的工作原理，如何使用cookie存储用户信息，字符的转码与解码规则，JS严格模式的限制，异常处理机制，以及Canvas API的基础知识，如fillRect、arc、moveTo、lineTo和clearRect。同时，还介绍了HTML拖放功能和HTML5缓存的localStorage与sessionStorage的使用方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、事件的委托

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul{
            background-color: #006dc7;
            padding: 10px;
        }
        ul>li{
            margin: 10px;
            background-color: #ec0000;
            color: #ffffff;
        }
    </style>
</head>
<body>
<ul class="ts">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var a=document.querySelector(".ts");
    a.onclick=function(e){
        var target= e.target|| e.srcElement;
        //console.log(target)
        if(target.nodeName.toLowerCase()=="li"){
            console.log(1)
        }
    }
</script>
</body>
</html>

分析：

这个是整体的代码，在代码最后面有个if假如我们把if后面的给删除的话，结果如图1。加上去的话，结果如图2，说明之前的点击事件已经被委托了。

结果:

二、js里面的cookie

cookie：缓存用户信息到浏览器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="base64.js"></script>
</head>
<body>
<script>
    /*
     * cookie
     * 缓存用户信息到浏览器   （缓存到本地文件）
     *
     * */
    var date=new Date().toUTCString();//这里用的是utc时间。比北京时间慢8小时
    console.log(date);
    document.cookie = "USER_KEY=maodou;domain=localhost;expires=Sun, 12 Jul 2020 02:10:40 GMT;path=/";
</script>
</body>
</html>

结果：

缓存在这里之后，等到了你所设置的时间，它就会自动消失。

已经没有了，注意你所设置的时间必须为UTC时间

三、js里面的转码解码

数字字母不能转码解码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="base64.js"></script>
</head>
<body>
<script>
    
    /*

    数字  字母  不能转码  解码
     */
    console.log(escape("abc123"));
    console.log(unescape(escape("abc123")));

    console.log(escape("可乐"));
    console.log(unescape(escape("可乐")));
    //对路径转码解码
    console.log(encodeURI("https://mp.youkuaiyun.com/console/editor/html?name=蓝莓&age=20"));
    console.log(decodeURI(encodeURI("https://mp.youkuaiyun.com/console/editor/html?name=蓝莓&age=20")));
    //编码解码
    console.log(window.btoa("2020 is terrible"));
    console.log(window.atob("MjAyMCBpcyB0ZXJyaWJsZQ=="));

    //console.log(window.btoa("可乐"));//这里我们对汉字无法进行编码解码但是我们可以按照下面的办法来
    console.log(window.btoa(escape("可乐")));
    console.log(unescape(window.atob("JXU1M0VGJXU0RTUw")));
</script>
</body>
</html>

结果：

四、js的严格模式

1、不允许使用未声明的变量

2、不允许删除变量

3、不允许变量重名

4、不允许对只读属性值赋值

5、变量名不能使用arguments字符串。

还有很多的不允许，这里就介绍这几种

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    //不允许使用未声明的变量：
    /*"use strict";
    a=10;
    console.log(a);

    function fun(){
        y=10;
        console.log(y);
    }
    fun();*/
    //严格模式下  不允许删除 变量
    /*"use strict"
    var a=20;
    delete  a;
    console.log(a);*/

    //不允许变量重名
    /*"use strict";
    function c(b,b){
    }*/
    //不允许对只读属性赋值:
   /* "use strict";
    var a={};
    Object.defineProperty(a,"name", {
        writeable: false,
        value: "***"
    });
    a.name="你好";
    console.log(a);*/

    //get set访问器
    /*var obj = {
        name: "",
        get getname() {
            //获取属性值
            return this.name;
        },
        set setname(n) {
            //设置属性值的
            this.name = n;
        }
    };
    //设置值
    obj.setname = "可乐";
    console.log(obj.getname);*/
    //标准模式
   /* "use strict";
    var per = {
        name: ""
    };
    Object.defineProperty(per, "name", {
        get: function () {
            console.log("获取值");
            return name;
        },
        set: function (n) {
            console.log("设置值");
            name = n;
        }
    });
    per.name = "草莓";
    console.log(per.name);*/
   /* "use strict";
     var o={
     get x(){
     return this.m;
     },
     set x(n){
     this.m=n;
     }
     };
     o.x=10;
     console.log(o.x);
     console.log(o);*/


//变量名不能使用 "arguments" 字符串:
   /* "use strict";
    var arguments=20;
    console.log(arguments);*/

//不允许使用以下这种语句:
    /*"use strict";
     while(Math){
     x=cos(10);
     }*/
</script>
</body>
</html>

五、异常处理

try、catch、finally

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    //这里打开数据库

    try {
        //写的是可能出现异常的代码
        fun1();
        console.log(1);
        //访问数据库
    }
    catch (e) {
        console.log(e);
        //throw e;
        //自定义错误信息
        throw  new Error("函数不存在");
    }
    finally {
        //最终怎么处理
        console.log(1);
        //关闭数据库
    }
</script>
</body>
</html>

六、canvas API

提示1：fillRect：4个参数，分别的含义为

x：填充矩形的起点横坐标。

y：填充矩形的起点纵坐标。

width：填充矩形的宽度。

height：填充矩形的高度。

提示2：arc：5个参数，分别的含义为

x：圆弧对应的圆心横坐标

y：圆弧对应的圆心纵坐标

r：圆弧的半径大小

startangel：圆弧开始的角度，单位是弧度

endangel：圆弧结束的角度，单位是弧度

anticlock：弧度的开始到结束的绘制按顺时针转，还是逆时针。顺时针为true，逆时针为false

提示3：moveTo、lineTo：2个参数，分别的含义为

moveTo：x落点的横坐标  y落点的纵坐标

lineTo：x绘制的直线的落点的横坐标  y绘制的直线的落点的纵坐标

提示4：clearRect：4个参数，分别的含义为：

x：矩形左上角x坐标

y：矩形左上角y坐标

width：被清除的矩形区域的高度

height：被清除的矩形区域的宽度。

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #naruto{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas id="naruto"></canvas>
<script>
var hinata=document.querySelector("#naruto");
    hinata.width=900;
    hinata.height=600;
    var sakura=hinata.getContext("2d");//先将canvas   转化为2d模型
//使用各种api  进行绘制
    sakura.save();//存储之前的状态
    sakura.fillStyle="pink";
//各个参数含义和作用如下：
//x填充矩形的起点横坐标。y填充矩形的起点纵坐标。width填充矩形的宽度。height填充矩形的高度。
    sakura.fillRect(50, 50, 100, 100);
    sakura.fill();
    sakura.restore();//取上一次存储的状态
    sakura.fillStyle="blue";
    sakura.fillRect(170, 50, 100, 100);
    sakura.fill();

    sakura.strokeStyle="#cdcdcd";
    sakura.strokeRect(290, 50, 100, 100);
    sakura.stroke();


    sakura.restore();
    sakura.fillStyle = "orange";
//绘制字体
    sakura.font="30px 幼圆";
    sakura.fillText("火影忍者",520, 50, 200);
    sakura.restore();
    sakura.strokeStyle = "green";
    sakura.font = "30px 宋体";
    sakura.strokeText("木叶飞舞之处,火亦生生不息", 430, 100, 300);

//绘制圆弧
    sakura.restore();
    sakura.strokeStyle="red";
    sakura.fillStyle="gold";
//参数
/*x:圆弧对应的圆心横坐标。
y:圆弧对应的圆心纵坐标。
radius:圆弧的半径大小。
startAngleNumber:圆弧开始的角度，单位是弧度。
endAngleNumber:圆弧结束的角度，单位是弧度。
anticlockwiseBoolean:弧度的开始到结束的绘制是按照顺时针来算，还是按时逆时针来算。顺时针true，逆时针false*/
    sakura.beginPath();
    sakura.arc(200, 270, 100, 0, Math.PI * 2, true);
    sakura.stroke();
    sakura.fill();
    sakura.closePath();


    sakura.restore();
    sakura.strokeStyle="green";
    sakura.beginPath();
    sakura.arc(200, 420, 100, 0, Math.PI / 2, false);
    sakura.stroke();
    sakura.closePath();

//绘制线条
    sakura.restore();
    sakura.strokeStyle="#000";
    sakura.beginPath();
//x落点的横坐标      y落点的纵坐标
    sakura.moveTo(320,370);
//x第1个控制点的横坐标。y第1个控制点的纵坐标。x1第2个控制点的横坐标。y1第2个控制点的纵坐标。radius圆弧的半径大小。
    sakura.arcTo(400,450,460,370,40);
    sakura.arcTo(470,350,500,370,40);
    sakura.lineTo(500,370);
    sakura.stroke();
    sakura.closePath();

   //清除区域
/*   x矩形左上角x坐标。
     y矩形左上角y坐标。
     width被清除的矩形区域的高度。
     height被清除的矩形区域的宽度度。*/
   sakura.clearRect(150, 220, 100, 100);
    //绘制椭圆
    sakura.beginPath();
    sakura.ellipse(600,500,30,30,Math.PI/4,0,Math.PI*2,false);
    sakura.stroke();
    sakura.closePath();

</script>
</body>
</html>

结果：

接下来用到的参数的提示，都在图片里面可以看看

  //绘制图片
    var image=new Image();
    image.onload=function () {
    sakura.clearRect(0, 0, 900, 600);
        /*1、image
         绘制在Canvas上的元素，可以是各类Canvas图片资源（见CanvasImageSource），如<img>图片，SVG图像，Canvas元素本身等。
         2、dx
         在Canvas画布上规划一片区域用来放置图片，dx就是这片区域的左上角横坐标。
         3、dy
         在Canvas画布上规划一片区域用来放置图片，dy就是这片区域的左上角纵坐标。
         4、dWidth
         在Canvas画布上规划一片区域用来放置图片，dWidth就是这片区域的宽度。
         5、dHeight
         在Canvas画布上规划一片区域用来放置图片，dHeight就是这片区域的高度。
         6、sx
         表示图片元素绘制在Canvas画布上起始横坐标。
         7、sy
         表示图片元素绘制在Canvas画布上起始纵坐标。
         8、sWidth
         表示图片元素从坐标点开始算，多大的宽度内容绘制Canvas画布上。
         9、sHeight
         表示图片元素从坐标点开始算，多大的高度内容绘制Canvas画布上。
         */
        //sakura.drawImage(this,0,0,200,200,200,200,200,100);
        //sakura.drawImage(this,0,0);

    sakura.beginPath();
    sakura.moveTo(300,300);
    sakura.moveTo(300,300);
    sakura.lineTo(325,300);
    sakura.arcTo(350,270,375,300,25);
    sakura.lineTo(375,300);
    sakura.lineTo(400,300);
    sakura.lineTo(400,400);
    sakura.lineTo(300,400);
    sakura.lineTo(300,300);
        //context.stroke();
    sakura.clip();
    sakura.closePath();
    sakura.drawImage(this,0,0,900,600);

    };
image.src = "./image/1.jpg";

结果：

/*
 createLinearGradient：
 x0 渐变起始点横坐标。
 y0 渐变起始点纵坐标。
 x1 渐变结束点横坐标。
 y1 渐变结束点纵坐标。
 */
    sakura.restore();
    var sasuke=sakura.createLinearGradient(100,0,100,380);

    sasuke.addColorStop(0.1,"red");
    sasuke.addColorStop(0.2,"orange");
    sasuke.addColorStop(0.3,"yellow");
    sasuke.addColorStop(0.4,"green");
    sasuke.addColorStop(0.5,"cyan");
    sasuke.addColorStop(0.6,"blue");
    sasuke.addColorStop(0.7,"purple");
    sakura.fillStyle=sasuke;
    sakura.clearRect(0,0,900,600);
    sakura.beginPath();
    sakura.fillRect(0,0,300,300);
    sakura.closePath();

结果：

第二种线性渐变：

/*
 createRadialGradient：
 x0 起始圆的横坐标。
 y0 起始圆的纵坐标。
 r0 起始圆的半径。
 x1 结束圆的横坐标。
 y1 结束圆的纵坐标。
 r1 结束圆的半径。
*/

    sakura.restore();
    var sasuke=sakura.createRadialGradient(150,150,0,150,150,150);
    sasuke.addColorStop(0.7,"red");
    sasuke.addColorStop(0.6,"orange");
    sasuke.addColorStop(0.5,"yellow");
    sasuke.addColorStop(0.4,"green");
    sasuke.addColorStop(0.3,"cyan");
    sasuke.addColorStop(0.2,"blue");
    sasuke.addColorStop(0.1,"purple");
    sakura.fillStyle=sasuke;
    sakura.clearRect(0,0,900,600);
    sakura.beginPath();
    sakura.fillRect(0,0,300,300);
    sakura.closePath();

结果：

sakura.restore();

    var txt=sakura.createLinearGradient(400,20,600,20);
    txt.addColorStop(0,"red");
    txt.addColorStop(0.2,"green");
    txt.addColorStop(0.4,"blue");
    txt.addColorStop(0.6,"orange");
    txt.addColorStop(1,"yellow");
    sakura.fillStyle = txt;
    sakura.font = "30px 宋体";
    sakura.fillText("火之意志",400, 50, 200);


     var image=new Image();
     image.onload=function (){
     sakura.restore();
     /*sakura.translate(600,100);
     sakura.rotate(Math.PI/4);
     sakura.translate(-600,-100);*/

/*
 transform:
 a水平缩放。
 b水平斜切。
 c垂直斜切。
 d垂直缩放。
 e水平位移。
 f垂直位移。
*/
    //sakura.transform(1,0.9,0.9,1, 0, 0);
    sakura.shadowColor="red";
    sakura.shadowBlur=10;
    sakura.shadowOffsetX=10;
    sakura.shadowOffsetY=2;
         /*
          createPattern：
          1、imageObject
          用来平铺的CanvasImageSource图像。可以是下面的类型：
         /2、repetitionString
          图案的平铺方式，可以是下面的值：
          'repeat'，水平和垂直平铺。当repetition属性值为空字符串''或者null，也会按照'repeat'进行渲染。
          'repeat-x'，仅水平平铺。
          'repeat-y'，仅垂直平铺。
          'no-repeat'，不平铺
          */
   var pattern=sakura.createPattern(this,"repeat-x");
    sakura.fillStyle = pattern;
    sakura.font = "60px 宋体";
    sakura.fillText("生生不息",400,200,400);
     };
image.src = "./image/1.jpg";

结果：

七、HTML拖放

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 600px;
            height: 337px;
            border: 1px solid red;
            float: left;
            box-sizing: border-box;
            padding: 5px;
            margin: 5px;
        }

        #img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="box"  ondrop="drop(event)" ondragover="dragover(event)">
    <!-- draggable="true"意思为可拖放的-->
    <!-- ondragstart="drag(event)"意思为开始拖放-->
    <img draggable="true" ondragstart="drag(event)" id="img" src="./image/2.jpg" alt=""/>
</div>
<div class="box2" ondrop="drop(event)" ondragover="dragover(event)">
</div>
<script>
    function drag(e) {
        //设置setData
        e.dataTransfer.setData("ele", e.target.id);//可以拿到目标元素的id值
    }

        function dragover(e) {
            e.preventDefault();//阻止事件默认行为
        }

        function drop(e) {
            //获取拖动的数据
            var id = e.dataTransfer.getData("ele");
            e.target.appendChild(document.getElementById(id));
        }

</script>
</body>
</html>

结果：图1，网页打开显示；图2：在拖动的过程中，且鼠标按下并未松开；图3：鼠标已经松开，拖放完成。

八、HTML5缓存

localStorage 存储信息到本地

sessionStorage 存储信息到浏览器，浏览器关闭之后，信息不存在。

localStorage.setItem()；     key键值   value 信息

localStorage.getItem()；      通过key获取存储信息

localStorage.removeItem()；根据键移除当前的信息

localStorage.clear()；            全部清除

localStorage.key()；               根据索引获取对应的键

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值