html5-css3 -- 总结 06（小白）

柿子来了

于 2024-08-18 09:00:00 发布

阅读量54

点赞数

文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/2301_78949452/article/details/141156136

版权

canvas

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        canvas {
            /* 画布不能用css设置宽和高 */
            /* width: 800px;
            height: 800px; */
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <!-- 画布 -->
    <!-- 可以用属性设置宽高 -->
    <canvas id="mcanvas" width="800" height="800">

    </canvas>

    <script>

        // 第一步：获得上下文（笔） =>canvasElem.getContext('2d');

        // 第二步：开始路径规划 =>cxt.beginPath();

        // 第三步：移动起始点 =>cxt.moveTo(x, y);

        // 第四步：绘制线(线条、矩形、圆形、图片...) =>cxt.lineTo(x, y);

        // 第五步：闭合路径 =>cxt.closePath();

        // 第六步：绘制描边 =>cxt.stroke();


        // 获取画布
        var mcanvas = document.querySelector("#mcanvas");

        // 也可以用js设置宽高
        // mcanvas.width = 800;
        // mcanvas.height = 800;

        // 创建画笔
        var cxt = mcanvas.getContext('2d');


        // 开始路径规划
        cxt.beginPath();

        // 作画起点
        cxt.moveTo(200, 200);

        // 作画
        // cxt.lineTo(400, 200);

        // cxt.lineTo(400, 400);

        // 画矩形
        cxt.rect(200, 200, 200, 200);

        // 路径闭合
        cxt.closePath();

        // 规定画笔颜色
        cxt.strokeStyle = "red";

        // 规定画笔粗细
        cxt.lineWidth = 5;

        // 绘制描边
        cxt.stroke();

        // 颜色填充
        cxt.fillStyle = "orange";
        cxt.fill();

        cxt.beginPath();
        cxt.moveTo(600, 600);
        cxt.lineTo(600, 700);
        cxt.strokeStyle = "skyblue";
        cxt.stroke();

    </script>
</body>

</html>

将图片画到画布上

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        canvas {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <canvas id="mcanvas" width="800" height="800"></canvas>

    <script>
        var mcanvas = document.querySelector("#mcanvas");

        // img DOM对象
        // 创建dom对象
        var pic = document.createElement("img");
        pic.src = "./image/cat.jpg";

        var cxt = mcanvas.getContext('2d');

        // 等待图片完全加载完毕再将图片画到画布上
        pic.onload = function () {
            // cxt.drawImage(pic, 0, 0);
                        
            // cxt.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
            cxt.drawImage(pic, 200, 200, 200, 200, 0, 0, 100, 100);
            //参数说明：
            //sx,sy 裁剪的左上角坐标，
            //swidth：裁剪图片的宽度。 sheight:裁剪的高度
        }
    </script>
</body>

</html>

Location对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <form action="">
        <input type="text" name="username">

        <input type="submit">
    </form>

    <a href="#">点击</a>
    <script>
        console.log(location);

        // 返回完整的url
        console.log(location.href);

        // 返回从 # 开始的 url 
        console.log(location.hash);

        console.log(location.search);

        document.querySelector("a").onclick = function(){
            location.href = "./将图片画到画布上.html";

            // location.assign("./canvas.html");

            // location.replace("./canvas.html")

            // location.reload();
        }
    </script>
</body>

</html>

Navigator对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- <a href="#">点击</a> -->
    <script>

        console.log(navigator.userAgent);
        // navigator.userAgent.match()  // 判断用户使用哪个中断打开的页面
        // if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
        //     window.location.href = "https://www.taobao.com";     //跳转到手机端的页面
        // } else {
        //     window.location.href = "https://www.qq.com";     //跳转到pc端的页面
        // }

        console.log(navigator.onLine);
    </script>
</body>

</html>

map

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #map {
            width: 800px;
            height: 800px;
        }
    </style>

    <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=Zzdk2JECCqz5b1LxxjvU8RNO60zJERtq">
        </script>
</head>

<body>
    <!-- 准备一个容器 -->
    <div id="map"></div>

    <script>
        var map = new BMapGL.Map("map");

        var point = new BMapGL.Point(113.62, 34.75);

        map.centerAndZoom(point, 15);

        var opts = {
            anchor: BMAP_ANCHOR_TOP_LEFT
        }

        var scaleCtrl = new BMapGL.ScaleControl(opts);  // 添加比例尺控件
        map.addControl(scaleCtrl);
        var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
        map.addControl(zoomCtrl);
        // var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
        // map.addControl(cityCtrl);

        // 创建地图
        function initMap() {
            // 1.
            setMap();
            setContorl();
        }

        // 初始化地图
        function setMap() {

            var point = new BMapGL.Point(113.62, 34.75);

            map.centerAndZoom(point, 15);
        }

        // 添加控件
        function setContorl() {
            var opts = {
                anchor: BMAP_ANCHOR_TOP_LEFT
            }
            var scaleCtrl = new BMapGL.ScaleControl(opts);  // 添加比例尺控件
            map.addControl(scaleCtrl);
            var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
            map.addControl(zoomCtrl);
            // var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
            // map.addControl(cityCtrl);
        }

        // 获取map
        var map = new BMapGL.Map("map");

        initMap();
    </script>
</body>

</html>

History对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="./canvas.html">点击1</a>
    <a href="./将图片画到画布上.html">点击2</a>

    <p>前进</p>
    <script>
        console.log(history);

        document.querySelector("p").onclick = function () {
            // history.back();
            // history.forward();

            history.go(0);
        }
    </script>
</body>

</html>

file对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="file" name="" id="getFile">

    <p>
        <img src="" alt="">
    </p>

    <script>
        var btn = document.querySelector("#getFile");
        var img = document.querySelector("img");

        // 实例化文件读取对象
        var reader = new FileReader();
        console.log(reader);

        // 内容改变事件
        btn.onchange = function () {
            console.dir(btn);
            console.log(btn.files[0]);

            // 读取文件
            // reader.readAsDataURL(btn.files[0]);
            reader.readAsDataURL(btn.files[0]);
            // 等待读取完成
            reader.onload = function () {
                // base64 编码
                console.log(reader.result);
                img.src = reader.result;
            }

        }
    </script>
</body>

</html>

本地存储

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // localStorage 永久存储
        console.log(localStorage);

        // sessionStorage 临时存储
        console.log(sessionStorage);


        var obj = {
            name: "wangwu",
            age: 30
        }

        // 对象转字符串 json字符串 JSON.stringify()
        var str = JSON.stringify(obj);
        console.log(str);

        // setItem()
        localStorage.setItem("name2", "lisi");
        localStorage.setItem("age2", 20);
        localStorage.setItem("obj", str);
        console.log(localStorage);

        // getItem()
        console.log(localStorage.getItem("name2"));
        console.log(localStorage.getItem("age2"));

        // 将 JSON 字符串转为对象 JSON.parse()
        var newstr = localStorage.getItem("obj");
        console.log(JSON.parse(newstr));
        // console.log(localStorage.getItem("obj"));

        // 删除
        // localStorage.removeItem("name2")

        // 清空
        // localStorage.clear();


        // localStorage 
        // 1.永久存储
        // 2.存储空间一般为 5MB
        // 3.作用域 多窗口可共享

        // sessionStorage
        // 1.关闭窗口内容清空
        // 2.存储空间 5MB
        // 3.作用域 本窗口可共享

    </script>
</body>

</html>