html5 笔记01

01 表单类型和属性

        input的type属性

                单行文本框: type=text

                电子邮箱 : type=email

                地址路径 : type= url  

                定义用于输入数字的字段: type=number

                手机号码: type=tel

                搜索框 : type=search

                定义颜色选择器 : type=color

                滑块控件 : type=range

                定义日期 :type=date

               定义输入时间的控件(无时区): type=time

                日期时间:type=datetime-local

                 定义月份和年份:type=month

                定义周和年控件:type=week

        表单的新增属性

                placeholder  占位符

                autofocus 自动获取焦点

                required 在提交表单之前必须填写输入字段

                autocomplete  自动完成 默认值为on 开启 off 关闭提示功能

                multiple  文件多选

02  音频标签(audio)

        h5之前的网页没有办法显示音视频  用插件 flash

        video audio 用法和img一样

        video和audio的属性:

                controls  规定应显示音频控件

                autoplay 自动播放

                loop 循环播放

        兼容写法:

               

03 视频标签 (video)

        poster 视频封面图

        perload 预加载

        autoplay 自动播放

        muted 静音播放

        兼容写法:

        

04 进度条标签

        <progress> 标签表示任务的完成进度

        属性:

                max 规定任务所需的总工作量。默认值为1

                value:规定任务已完成的部分。

05 canvas绘图

       1. canvas 特点:

                有自己默认高度: 300*150

                不建议通过css设置宽高 使用行内属性设置宽高

                canvas 不独占一行 属于行内块元素

                canvas 一般建议兼容写法: 标签内部定义文字

       2. canvas的使用步骤

                定义canvas标签

                        <canvas style="border: 1px solid #000;" width="400" height="400">

                                您的浏览器版本不支持canvas绘图技术

                        </canvas>

                js获取canvas对象

                         var mycanvas=document.getElementsByTagName('canvas')[0]

                通过canvas对象获取画笔对象

                        var ctx=mycanvas.getContext('2d');

        3.canvas绘制线的使用

                .moveTo(x,y)  定点方法(当前画笔从哪里开始绘制)

                .lineTo(x,y)  从当前定点位置开始 绘制到x,y点结束

                .stroke() 描边

                        描边才能看见线  如果想要画多条线 要都画完再去描边 减少和浏览器的交互次数

                .fill()  填充(把图形跳虫成实心的) 未闭合的图形会自动闭合

                .closePath() 自动闭合图形

                .lineWidth=数值 设置线的宽度

                .strokeStyle='颜色'  设置描边的颜色(只针对描边图形生效)

                .fillStyle='颜色'  设置填充的颜色(默认黑色)

                 .beginPath() 开辟新路径

                        

                        上面的代码最终结果是两条线长一样

                        原因是 我们虽然描边了两次 但是canvas源码内部处于性能优化方面考虑

                        多次描边 只会按照最后一次的样式 一次性描边上去 节省性能

        4.画笔的一些功能

                ctx.lineCap 线两端的样式:

                       butt 默认值 没有样式

                       round 两端圆形

                       square 两端方块

                交叉点:

                        上一条线的结束点 为第二条线的起点  这样才被识别为 交叉点  

                        才可以设置交叉点样式

                        ctx.lineJoin="" 交叉点的样式

                                miter(默认值 不转换) 一个尖尖的 尖儿

                                round(交点呈现圆角)

                                bevel(平角样式,不呈现尖角)

                        不设置交叉点样式时  可以设置

                                ctx.miterLimit属性   0~5都是平角  6~9都是尖角

        5.绘制矩形

               .rect(x,y,width,height)  绘制一个矩形

                        可以通过fill画实心,也可以通过stroke画空心

                .strokeRect(x,y,width,height) 直接绘制一个空心矩形

                        不用再次调用stroke方法  快速描边一个矩形

                .fillRect(x,y,width,height) 直接绘制一个填充矩形

                        不用再次调用fill方法    快速填充一个矩形

        6.绘制弧形

                

                弧的绘制:

                        ctx.arc(圆心x,圆心y,半径r,开始弧,结束弧,布尔值(方向:顺/逆) 可选)

                                布尔值默认是false(顺时针)    开始的位置默认在右侧

                        例:

                                设置负值  然后结束的是45度 表示把剩余的都画了

                                ctx.arc(200,200,100,0,-Math.PI/180*45)

        7.清除绘制内容

                 清除绘制内容(橡皮擦)

                        ctx.clearRect(x,y,width,height); 

        8.绘制文本

                ctx.strokeText(str,x,y)   绘制空心字体

                ctx.fillText(str,x,y)  绘制实心字体  默认比上面黑一些 

                ctx.font=“20px 宋体” 字体大小(必须写family)

                        ps:只有字体变大才能看出stroke的效果

                ctx.font=“bold 50px 宋体” 可以有加粗效果

                ctx.textBaseLine="";  文本基线问题:

                        alphabetic 默认值  按照默认的字母基线对齐

                        top 顶部为基线

                        bottom 文本底部为基线

                        haning 如果有中文 那么比较top来说 更往下一点

                        ideographic 比bottom还往上一点

                        middle 文字中部对齐

                 ctx.textAligin=""   文本横向对齐方式

                        start/left  end/right  center

        9.渐变的使用

                先创建渐变对象 然后使用strokeStyle/fillStyle 引入渐变对象

                

                

        10.阴影的绘制

                Ctx.shadowColor=“颜色” 阴影颜色

                Ctx.shadowBlur=number   阴影模糊度

                Ctx.shadow.OffsetX =number  模糊X轴

                Ctx.shadow.OffsetY=number  模糊Y轴

                Tips:filleRect和filleText都有阴影效果哟

        11.canvas画图

                绘制图片的方法

                        1.Ctx.drawImage(image,x,y)

                                参数1: 图片对象  参数23  图片绘制位置

                                按照原图片大小绘制

                        2. Ctx.drawImage(image,x,y,width,height)

                                width和height可以改变图片大小

                        3.Ctx.drawImage(image,x,y,width,height,dtx,dty,dtwidth,dtheight)

                                图片对象 从哪一个点开始截取 截取的宽高  在哪一个点开始画 画的宽

                                能够从图片中截取一部分 画到canvas指定位置 并且 定义画的宽高

        12.canvas转换的使用

                Canvas中的转换只有旋转,位移,缩放

                        ctx.translate(x,y) 将canvas的0,0点平移到x,y位置

                        画布整体被往下平移以后 后面画的元素都会按照新的点去画

                        Ctx.scale(x,y) 缩放

                        会把内部的内容全部按比例缩放

                        Ctx.rotate(Math.PI/180*30) 参数是角度弧

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/839074.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PL/SQL语句中的函数、游标、及存储过程的应用

在PL/SQL&#xff08;ProceduralLanguage/SQL&#xff09;中&#xff0c;游标、函数和存储过程是重要的编程结构&#xff0c;能够极大地增强Oracle数据库的处理能力。 下面分别介绍它们的语法和应用。 1.游标&#xff08;Cursor&#xff09; 游标简介 游标用于在PL/SQL代码中逐…

04-Json/Ajax/Vue的知识

1. Json结构 1.1 Json概述 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式&#xff0c;实现数据前后端交互。 它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。 JSON采用完全独立于程序语言的文本格式。这些特性使JSON成为理想的数据交换…

英码科技算能系列边缘计算盒子再添新成员!搭载TPU处理器BM1688CV186AH,功耗更低、接口更丰富

在数据呈现指数级增长的今天&#xff0c;越来越多的领域和细分场景对实时、高效的数据处理和分析的需求日益增长&#xff0c;对智能算力的需求也不断增强。为应对新的市场趋势&#xff0c;英码科技凭借自身的硬件研发优势&#xff0c;携手算能相继推出了基于BM1684的边缘计算盒…

5.23.1 深度学习在乳腺癌成像中的应用

乳腺成像在早期发现乳腺癌以及在治疗期间监测和评估乳腺癌方面发挥着重要作用。最常用的乳腺成像方式是数字乳房X线摄影、数字乳腺断层合成、超声和磁共振成像。 传统的 CAD 系统基于传统的机器学习 (ML) 技术&#xff1b;预定义&#xff08;手工制作&#xff09;的特征是系统…

【堡垒机小知识】堡垒机和接口机的重要区别分析

在企业IT架构管理中&#xff0c;接口机和堡垒机各自扮演着不可或缺的角色。但不少IT小伙伴对于两者不是很了解&#xff0c;不知道两者之间有什么区别&#xff0c;今天我们就来一起分析一下。 堡垒机和接口机的重要区别分析 1、功能区别 接口机主要用于数据库层面的数据交换和…

Linux多线程系列2: 模拟封装简易语言级线程库,线程互斥和锁,线程同步和条件变量,线程其他知识点

Linux多线程系列2: 模拟封装简易语言级线程库,线程互斥和互斥锁,线程同步和条件变量,线程其他知识点 1.前言 一.模拟C11线程库自己封装简易语言级线程库1.实现框架2.迅速把构造等等函数写完3.start和work1.尝试一2.尝试二3.最终版本4.给出代码 二.模拟实现多线程(为编写线程池做…

代码随想录训练营Day34:背包问题解决打家劫舍

1.198打家劫舍 1.dp数组的含义&#xff1a;dp[i]表示从第零个偷到第i个能够偷到的最大价值。 2.递推公式&#xff1a;分成两种情况&#xff1a; 偷第i个的情况下的最大值&#xff0c;注意此时第i-1个肯定是不偷的&#xff0c;所以此时dp[i] dp[i-2]nums[i];>dp[j] dp[j…

Unity数据持久化2——XML

简介&#xff1a; 基础知识 XML文件格式 XML基本语法 XML属性 练习&#xff1a; C#读取存储XML XML文件存放位置 读取XML文件 练习&#xff1a; 存储修改XML文件 练习&#xff1a; 总结 实践小项目 必备知识点 必备知识点——C#中XML序列化 必备知识点——C#中XML反序列化 必备…

java 线程执行原理,java线程在jvm中执行流程

java 线程执行原理&#xff0c;java线程在jvm中执行流程 从jvm视角看java线程执行过程 ##首先thread.c注册jni函数 JNIEXPORT void JNICALL Java_java_lang_Thread_registerNatives(JNIEnv *env, jclass cls) {(*env)->RegisterNatives(env, cls, methods, ARRAY_LENGTH(…

第八课,分支语句嵌套、随机数函数、初识while循环

一&#xff0c;分支结构的嵌套语法 在 Python 中&#xff0c;分支结构可以嵌套&#xff0c;这意味着你可以在一个条件语句中包含另一个条件语句。嵌套的分支结构可以让你更灵活地控制程序的逻辑流程。 怎么理解呢&#xff1f;打个比方&#xff1a;放学后&#xff0c;请三年级…

【MySQL精通之路】MySQL8.0新增功能-原子DDL语句支持

太长不看系列&#xff1a; 本文一句话总结&#xff0c;MySQL8.0支持多条DDL语句执行时的原子性了&#xff08;仅限Innodb&#xff09; 本文属于下面这篇博客的子博客&#xff1a; 【MySQL精通之路】MySQL8.0官方文档-新增功能 1.意义描述 MySQL 8.0支持原子数据定义语言&…

知乎广告推广开户最低需要多少钱?

精准高效的广告推广&#xff0c;是企业成功的关键&#xff0c;知乎作为知识分享与交流的高端平台&#xff0c;汇聚了大量高质量用户群体&#xff0c;无疑是品牌传播与产品推广的黄金之地。云衔科技作为您数字营销旅程中的得力伙伴&#xff0c;正以专业的知乎广告开户及代运营服…

快速搭建本地全文搜索

MeiliSearch 说起全文检索&#xff0c;在项目开发中&#xff0c;用的最多的就是 ElaticSearch 了&#xff0c;ElaticSearch 是基于 Apache Lucene 开发的全文检索服务&#xff0c;是一个端到端的解决方案&#xff0c;因此&#xff0c;部署和维护都非常复杂。今天介绍的这个全文…

AI配音可以商用吗?

随着人工智能技术的迅猛发展&#xff0c;AI配音技术在近几年的进步尤为显著。从最初的机械合成音到如今的智能语音合成&#xff0c;AI配音已经在广告、教育、媒体等领域中崭露头角&#xff0c;展现出其无限的潜力和广阔的应用空间。 AI配音技术的发展历程 AI配音技术起源于语…

如何在go项目中实现发送邮箱验证码、邮箱+验证码登录

前期准备 GoLand &#xff1a;2024.1.1 下载官网&#xff1a;https://www.jetbrains.com/zh-cn/go/download/other.html Postman&#xff1a; 下载官网&#xff1a;https://www.postman.com/downloads/ 效果图(使用Postman) Google&#xff1a; QQ&#xff1a; And …

【星海随笔】微信小程序(二)

WXML 模板语法 - 数据绑定 在data中定义页面的数据 在页面对应的 .js 文件中&#xff0c;把数据定义到 data 对象中即可&#xff1a; Page({data: {// 字符串类型的数据info: init data,// 数据类型的数据msgList: [{msg: hello},{msg: world}]} })Mustache 语法的格式 把 …

jQuery值操作例子 (代码)

直接上代码 <!DOCTYPE html> <html><head></head><body><div id"x1">例子</div><script src"js/jquery-3.7.1.min.js"></script><script>console.log($("#x1").text()) // 在浏览…

创建vue工程、Vue项目的目录结构、Vue项目-启动、API风格

环境准备 介绍&#xff1a;create-vue是Vue官方提供的最新的脚手架工具&#xff0c;用于快速生成一个工程化的Vue项目create-vue提供如下功能&#xff1a; 统一的目录结构 本地调试 热部署 单元测试 集成打包依赖环境&#xff1a;NodeJS 安装NodeJS 一、 创建vue工程 npm 类…

自定义横向思维导图,横向组织架构图,横向树图。可以自定义节点颜色,样式,还可以导出为图片

最近公司设计要求根据目录结构&#xff0c;横向展示。所以做了一个横向的思维导图&#xff0c;横向的树结构&#xff0c;横向的组织架构图&#xff0c;可以自定义节点颜色&#xff0c;样式&#xff0c;还可以导出为图片 话不多说&#xff0c;直接上图片&#xff0c;这个就是一…

使用redis优化纯真IP库访问

每次请求都需要加载10m的纯真IP qqwry.dat 文件&#xff0c;自己测试不会发现问题&#xff0c;但如果访问量上去了&#xff0c;会影响每次请求的相应效率&#xff0c;并且会消耗一定的io读写&#xff0c;故打算优化 优化方案 每个IP区间之间不存在交集&#xff0c;每个查找只要…