Day09-HTML5 CSS3

最新推荐文章于 2024-07-23 16:10:02 发布
最新推荐文章于 2024-07-23 16:10:02 发布
阅读量19 收藏
点赞数
文章标签： html5 css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Spirs/article/details/134752117
版权

一.canvas

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .can{
            border: 1px solid red;
        }
    </style>
</head>

<body>

    <!-- 画布具有默认宽高 -->
    <canvas class="can" width="800" height="800">
        您当前浏览器不支持canvas 请升级浏览器版本吧
    </canvas>

</body>

</html>

二.绘制直线

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #can {
            border: 1px solid red;
        }
    </style>
</head>

<body>

    <canvas id="can" width="800" height="800">您当前浏览器不支持canvas 请升级浏览器</canvas>

    <script>

        // console.log(can);
        // 1.获取元素
        var canvas = document.querySelector('#can');
        // 2.获取画笔
        var myCan = canvas.getContext('2d');
        console.log(myCan);

        // 3.定义一个起点 (绘制一个起点)
        // moveTo(x,y); 用来绘制起点
        myCan.moveTo(200, 200);

        // 4.绘制直线
        // lineTo(x,y); 直线的起点就是上一步设置 moveTo的x，y坐标
        myCan.lineTo(600, 600);

        // 5.填充图形
        myCan.stroke();

    </script>

</body>

</html>

三.画笔的颜色和粗细

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #can {
            border: 1px solid red;
        }
    </style>
</head>

<body>

    <canvas id="can" width="800" height="800">您当前浏览器不支持canvas 请升级浏览器版本吧</canvas>

    <script>

        // console.log(can);
        // 1.获取元素
        var canvas = document.querySelector("#can");
        // 2.获取画笔
        var myCan = canvas.getContext('2d');
        console.log(myCan);

        // 3.定义一个起点（绘制一个起点）
        // moveTo(x,y) 用来绘制起点
        myCan.moveTo(200, 200);

        // 4.绘制直线
        // lineTo(x,y) 直线的起点就是上一步设置 moveTo的xy坐标
        myCan.lineTo(600, 600);


        // 画笔的颜色和粗细要在填充之前修改
        myCan.strokeStyle = "orange";
        myCan.lineWidth = 10;

        myCan.moveTo(600,600);
        myCan.lineTo(600, 200);

        // 5.填充图形
        myCan.stroke();

    </script>

</body>

</html>

四.绘制矩形

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #can {
            border: 1px solid red;
        }
    </style>
</head>

<body>

    <canvas id="can" width="800" height="800">您当前浏览器不支持canvas 请升级浏览器版本吧</canvas>

    <script>

        // console.log(can);
        // 1.获取元素
        var canvas = document.querySelector("#can");
        // 2.获取画笔
        var myCan = canvas.getContext('2d');
        console.log(myCan);

        // 路径的开始
        // 开始路径
        myCan.beginPath();

        // 3.定义一个起点（绘制一个起点）
        // moveTo(x,y) 用来绘制起点
        myCan.moveTo(200, 200);

        // 4.绘制直线
        // lineTo(x,y) 直线的起点就是上一步设置 moveTo的xy坐标
        myCan.lineTo(200, 400);
        myCan.lineTo(600, 400);
        myCan.lineTo(600, 200);


        // 画笔的颜色和粗细要在填充之前修改
        myCan.strokeStyle = "orange";
        myCan.lineWidth = 10;


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

        // 5.填充图形
        myCan.stroke();

    </script>

</body>

</html>

五.绘制三角形

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #can {
            border: 1px solid red;
        }
    </style>
</head>

<body>

    <canvas id="can" width="800" height="800">您当前浏览器不支持canvas 请升级浏览器版本吧</canvas>

    <script>

        // console.log(can);
        // 1.获取元素
        var canvas = document.querySelector("#can");
        // 2.获取画笔
        var myCan = canvas.getContext('2d');
        console.log(myCan);

        // 路径的开始
        // 开始路径
        myCan.beginPath();

        // 3.定义一个起点（绘制一个起点）
        // moveTo(x,y) 用来绘制起点
        myCan.moveTo(400, 200);

        // 4.绘制直线
        // lineTo(x,y) 直线的起点就是上一步设置 moveTo的xy坐标
        myCan.lineTo(200,500);
        myCan.lineTo(600,500);


        // 画笔的颜色和粗细要在填充之前修改
        myCan.strokeStyle = "orange";
        myCan.lineWidth = 10;


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

        // 5.填充图形
        myCan.stroke();

    </script>

</body>

</html>

六.快速创建矩形

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #can {
            border: 1px solid red;
        }
    </style>
</head>

<body>

    <canvas id="can" width="800" height="800">您当前浏览器不支持canvas 请升级浏览器版本吧</canvas>

    <script>

        // console.log(can);
        // 1.获取元素
        var canvas = document.querySelector("#can");
        // 2.获取画笔
        var myCan = canvas.getContext('2d');

        // myCan.rect(x, y, width, height);
        myCan.rect(200, 200, 400, 100);
        myCan.strokeStyle = "pink";
        myCan.lineWidth = 10;
        // 填充
        myCan.stroke();

    </script>

</body>

</html>

七.快速创建描边矩形

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #can {
            border: 1px solid red;
        }
    </style>
</head>

<body>

    <canvas id="can" width="800" height="800">您当前浏览器不支持canvas 请升级浏览器版本吧</canvas>

    <script>

        // console.log(can);
        // 1.获取元素
        var canvas = document.querySelector("#can");
        // 2.获取画笔
        var myCan = canvas.getContext('2d');

        // myCan.strokeRect(x, y, width, height);
        myCan.strokeRect(200, 200, 400, 200);

    </script>

</body>

</html>

八.快速创建填充矩形

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #can {
            border: 1px solid red;
        }
    </style>
</head>

<body>

    <canvas id="can" width="800" height="800">您当前浏览器不支持canvas 请升级浏览器版本吧</canvas>

    <script>

        // console.log(can);
        // 1.获取元素
        var canvas = document.querySelector("#can");
        // 2.获取画笔
        var myCan = canvas.getContext('2d');
        console.log(myCan);

        // myCan.fillRect(x, y, width, height);
        // fillStyle 用来修改 填充颜色
        myCan.fillStyle = "pink";
        myCan.fillRect(200, 200, 400, 200);

    </script>

</body>

</html>

九.填充三角形

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #can {
            border: 1px solid red;
        }
    </style>
</head>

<body>

    <canvas id="can" width="800" height="800">您当前浏览器不支持canvas 请升级浏览器版本吧</canvas>

    <script>

        // console.log(can);
        // 1.获取元素
        var canvas = document.querySelector("#can");
        // 2.获取画笔
        var myCan = canvas.getContext('2d');
        console.log(myCan);

        // 路径的开始
        // 开始路径
        myCan.beginPath();

        // 3.定义一个起点（绘制一个起点）
        // moveTo(x,y) 用来绘制起点
        myCan.moveTo(400, 200);

        // 4.绘制直线
        // lineTo(x,y) 直线的起点就是上一步设置 moveTo的xy坐标
        myCan.lineTo(200,500);
        myCan.lineTo(600,500);


        // 画笔的颜色和粗细要在填充之前修改
        myCan.strokeStyle = "orange";
        myCan.lineWidth = 10;
        // 填充图形
        myCan.fillStyle = "purple"
        myCan.fill();

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

        // 5.填充图形
        myCan.stroke();

    </script>

</body>

</html>

十.清除矩形

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #can {
            border: 1px solid red;
        }
    </style>
</head>

<body>

    <canvas id="can" width="1200" height="900">您当前浏览器不支持canvas 请升级浏览器版本吧</canvas>

    <script>

        // console.log(can);
        // 1.获取元素
        var canvas = document.querySelector("#can");
        // 2.获取画笔
        var myCan = canvas.getContext('2d');

        myCan.rect(200, 300, 400, 400);
        // 画笔颜色
        myCan.strokeStyle = "pink";
        // 画笔粗细
        myCan.lineWidth = 10;

        // 填充颜色
        myCan.fillStyle = "yellow";
        // 填充方法
        myCan.fill();

        // cxt.clearRect(x, y, width, hegiht);
        myCan.clearRect(260, 380, 100, 100);
        myCan.stroke();

    </script>

</body>

</html>

十一.圆弧

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #can {
            border: 1px solid red;
        }
    </style>
</head>

<body>

    <canvas id="can" width="800" height="800"></canvas>

    <script>

        var can = document.querySelector('#can');
        // 获取画笔
        var mycan = can.getContext('2d');
        // 弧度和角度的转换公式： rad = deg*Math.PI/180; deg=rad*180/Math.PI
        // 语法：cxt.arc(x, y, r, startAngle, endAngle, counterclockwise);

        // 开始路径
        mycan.beginPath();
        mycan.moveTo(400, 400);
        var strat = 0 * Math.PI / 180;
        var end = 90 * Math.PI / 180;
        // mycan.arc(400, 400, 200, strat, end, false);
        mycan.arc(400, 400, 200, strat, end, true);
        // 结束路径
        mycan.closePath();
        mycan.stroke();

    </script>

</body>

</html>

十二.绘制饼图

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #can {
            border: 1px solid red;
        }
    </style>
</head>

<body>

    <canvas id="can" width="800" height="800"></canvas>

    <script>

        var mycan = can.getContext("2d");
        console.log(mycan);


        // 通过数据进行绘制饼图
        var data = [{
            "value": .2,
            "color": "red",
            "title": "应届生"
        }, {
            "value": .3,
            "color": "blue",
            "title": "社会招生"
        }, {
            "value": .4,
            "color": "green",
            "title": "老学员推荐"
        }, {
            "value": .1,
            "color": "pink",
            "title": "公开课"
        }];

        // arc(x,y,r,s,e,t)
        // for
        // 开始弧度
        var stratA = 0;
        // 结束弧度
        var endA = 0;
        // 圆心
        var x = 400;
        var y = 400;
        // 半径
        var r = 200;

        // 弧度和角度的转换公式： rad = deg*Math.PI/180; deg=rad*180/Math.PI
        for (var i = 0; i < data.length; i++) {
            // 每一分数据的 占用的 弧度
            // (data[i].value * 360) * Math.PI / 180
            // 1.开始路径
            mycan.beginPath();
            // 2.绘制起点
            mycan.moveTo(400, 400);
            // 3.根据 value 计算 每条数据所占用的弧度
            var rads = (data[i].value * 360) * Math.PI / 180;
            // 72
            console.log(rads);
            // 4.求出一个结束弧度
            // 72     0     72
            // 180       72   108
            endA = endA + rads;
            //                   72     72
            mycan.arc(x, y, r, stratA, endA);
            mycan.closePath();
            mycan.stroke();
            mycan.fillStyle = data[i].color;
            mycan.fill();
            // 每一份数据的开始弧度 就是 上一份数据的结束弧度
            stratA = endA;
        }
        // 扩展
        mycan.fillStyle = "black";
        mycan.font = "700 30px serif";
        mycan.fillText(data[0].title, 450, 500);
        mycan.fillText(data[1].title, 300, 500);
        mycan.fillText(data[2].title, 300, 300);
        mycan.fillText(data[3].title, 500, 360);

    </script>

</body>

</html>

十三.绘制文本

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #can {
            border: 1px solid red;
        }
    </style>
</head>

<body>

    <canvas id="can" width="600" height="600"></canvas>
    <!-- <img src="../img/1.png" alt=""> -->

    <script>

        //  cxt.drawImage(img,x,y,width,height);
        var mycan = can.getContext("2d");

        // 创建元素
        var img = document.createElement("img");
        img.src = "../img/1.png";

        // onload 等待内容 资源文件加载完毕之后执行
        img.onload = function () {
            // mycan.drawImage(img, 0, 0, 600, 600);

            // 9参数可以对 图片进行裁剪
            // sx,sy            裁剪图片的位置 
            // swidth,sheight   裁剪大小
            // x,y,             裁剪之后显示在画布内的方位
            // width,height     裁剪之后显示在画布内的大小
            // cxt.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
            // 先裁剪 然后规定现在画布内的大小
            mycan.drawImage(img, 330, 240, 100, 100, 0, 0, 600, 600)
            mycan.fillStyle = "orange";
            mycan.font = "20px 华文彩云"
            mycan.fillText("", 60, 140);
        }

    </script>

</body>

</html>

前端拓海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端学习笔记 - HTML+CSS
fengxm0309的博客
10-07 4649
基础认知 网页 什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Lang
Web前端html5+css3前端开发入门学习笔记
m0_62516225的博客
10-16 1997
Web前端html5+css3前端开发入门学习笔记
20day-HTML&CSS-1~24
DaB210的博客
03-31 945
20day-HTML&CSS-1~24
day10-HTML5&CSS3提高
weixin_48697269的博客
04-22 884
目标 能够说出 3~5 个 HTML5 新增布局和表单标签 能够说出 CSS3 的新增特性有哪些 HTML5新特性 概述 HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 语义化标签 （★★） 以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的 <div class=“header”> </div>
前端Web开发HTML5+CSS3+移动web视频教程 Day3 CSS 第1天
chengkai730的博客
06-29 1521
Day3 CSS 第1天
100行Html5+CSS3+JS代码实现元旦倒计时界面
热门推荐
知心宝贝的博客
12-29 1万+
一、前言 二、圣诞树 效果展示： 三、步骤 如果之前看过我这篇文章的 1.下载VSCode 下载链接：VSCode 在Hbuilder、idea运行也是可以的，这里推荐使用VSCode 2.配置插件 三个插件对应的功能： 改写标签后自动完善 切换成中文页面 让代码在网页中打开，默认键Alt+B 3.构建三个文件 在桌面新建一个空的文件夹，用VSCode打开 在VSCode新建三个文件 index .html domtree....
HTML5+CSS3之快速入门 day6-day10布局，表单，css精灵，css hack，BFC规范
m0_47268176的博客
11-30 1万+
day06 布局核心： 盒模型（间距） 浮动 （并排） 定位 （覆盖+ 特殊位置） 定位类型position 静态定位 position:static; 默认值 静态定位不能使盒子位置变化 不适合布局 作用：解决低版本浏览器兼容问题 相对定位 position:relative; 能不能使盒子发生位置变化 yes ​ 2. 参考对象：自身初始位置 ​ 3. 脱离不脱离标准流 不脱离标准（保留原来位置 ） ​ 4. 是否适合布局：不适合
HTML5+CSS3实现鼠标悬停图文卡片动画切换特效
qq_36595761的博客
07-15 2534
HTML5+CSS3实现鼠标悬停图文卡片动画切换特效
day07.11.HTML-CSS盒模型练习
m0_61566562的博客
06-29 800
【代码】HTML-CSS盒模型练习。
前端web入门-CSS-day06-标准流和flex布局
来自计科大一萌新的编程记录本
06-17 1477
学习目标：1. 了解标准流概念 2.学会使用flex布局
day10-HTML5&CSS3提高.pdf
10-11
HTML5与CSS3是现代网页开发的基石，它们带来了许多增强功能和改进，使得网页设计更加丰富和动态。HTML5的新特性主要集中在增强网页的语义化、多媒体支持以及表单元素的扩展。 语义化标签是HTML5的一大亮点，它们...
day5-html-css-js
05-10
在"day5-html-css-js"的学习资源中，你可能会深入学习以下HTML知识点： 1. **HTML5新特性**：HTML5增加了许多新的标签，如`<header>`, `<footer>`, `<article>`, `<section>`等，使页面结构更加清晰，便于SEO和无...
高级软件人才培训专家-day01-HTML-CSS
03-10
高级软件人才培训专家-day01-HTML-CSS
day01-HTML-CSS.md
03-21
day01-HTML-CSS.md
day06-HTML&CSS.zip
03-01
同时，这也会涉及到HTML5的新特性，如语义化标签、音频/视频嵌入、离线存储等，以及CSS3的新功能，如过渡、动画、多列布局等。 总之，HTML和CSS是构建网页不可或缺的工具，掌握它们能让你具备创建动态、交互式网页...
HTML5的离线存储
weixin_46515434的博客
07-19 693
此外，随着Web技术的发展，新的缓存和离线存储技术（如Service Workers和Cache API）正在逐渐取代HTML5的离线缓存功能，因此开发者也可以考虑使用这些新技术来实现离线存储的需求。该文件包含一个或多个CACHE、NETWORK和FALLBACK部分，用于指定需要缓存的文件和资源、哪些文件需要在线访问、以及在无法访问某个资源时应使用的备用资源。在HTML文档的部分，通过添加一个指向缓存清单文件的标签（或使用manifest属性，具体取决于浏览器支持情况），将缓存清单与HTML文件相关联。
HTML5应用的安全防护策略与实践
@云安全小杜
07-17 505
随着HTML5及其相关技术（如CSS3和JavaScript）的普及，Web应用变得越来越强大和复杂，同时也成为黑客攻击的目标。本文将探讨HTML5应用面临的常见安全威胁，以及如何通过最佳实践和代码示例来增强应用的安全性。
CSS3雷达扫描效果
最新发布
u011626414的专栏
07-23 197
这个示例创建了一个非常基础的雷达扫描效果。您可以根据需要调整颜色、大小、旋转速度等属性，以及添加更多的细节和效果。要创建一个CSS3的雷达扫描效果，我们可以使用CSS的动画（元素在2秒内从0度旋转到360度，从而实现连续的扫描效果。属性设置为50%，这会将扫描线的顶部置于雷达圆的中心，而。的圆形div作为雷达的主体，并在其中放置了一个名为。则会将其向上移动自身高度的一半，从而实现垂直居中。的垂直线，这条线将作为雷达的扫描线。，确保旋转的起点在元素的顶部中心。进行旋转，模拟雷达扫描的效果。
CSS3 简介
07-22 526
CSS3，即层叠样式表的第三代，是网页设计和开发中不可或缺的技术之一。它为HTML元素提供了更加丰富和灵活的样式定义，使得网页不仅结构清晰，而且外观精美，用户体验大大提升。CSS3引入了许多新特性，如圆角、阴影、渐变、动画等，这些特性使得网页设计更加生动和互动。
理解CSS布局：浮动、清除浮动及伪元素解析
"day06（CSS04-浮动）v1.0.pdf" 这篇资料主要介绍了CSS布局中的几个核心概念，包括结构伪类选择器、伪元素、标准流、浮动以及清除浮动。以下是这些概念的详细说明： 1. 结构伪类选择器: 结构伪类选择器允许开发者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值