yy小栗子-CSDN博客

原创 canvas绘制线条、矩形、曲线及填充

四个参数起点坐标x,y左上角坐标；lineTo会把上一次的终点作为这一次的起点,没有上一次的终点那就没有这一次的起点。8.stroke()开始绘制图形，当前路径下的所有子路经都会绘制出来；6.fill()填充区域，此时只是填充，起点和终点并没有连接起来；3.moveTo开始定义一条新的子路径，该方法确定了线段的起点；9.如果要接着绘制新的路径，记得调用beginPath()方法；4.lineTo将上面定义的线段起点和指定的新的点连接起来；1.绘制线段的API是上下文对象的方法；.........

2022-07-22 19:49:08 1733 1

原创 canvas初识

绝大多数的画布绘制API来自这个对象；也就是说画布元素和他的上下文对象是两个完全不同的概念；调用该方法时，传递的参数是“2d”，也就是。不同于用像素来描绘的矩阵图像（JPG、PNG、GIF），SVG是和分辨率无关的；，可以在画布上绘制二维图像；画布的宽度和高度要用canvas的属性设置，不要直接在css里面定义；SVG是一种可伸缩的矢量图型，它基于XML并用于描述图形的语言；SVG图像可以通过JS和DOM操作来创建和操控；canvas画布，h5新标签；往右为X轴的坐标不断增大；往下为Y轴的坐标不断增大；..

2022-07-22 19:07:55 196

原创 ES6-class(类)

1.概述在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。class 的本质是 function。它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。类不可重复声明类定义不会被提升，这意味着必须在访问前对类进行定义，否则就会报错2.类定义3.类的主体属性：ES6的类中不能直接定义变量，变量被定义在constructor中。方法constructor 方法是类的默认方法，创建类的对象时被调用。也被称为类的构造方法（构造函数、构造器）。一个类

2022-07-13 09:17:31 189

原创 ES6-模块化

//js代码有3种方式把js脚本写在页面中 //1.行内式:js引擎要去执行的标签的某些(事件)属性中 //2.嵌入式 //3.导入 src的地址是一个js的路径会加载js编码(jsonp)

2022-07-13 09:11:12 72

原创 ES6-箭头函数

1.箭头函数定义箭头函数提供了一种更加简洁的函数书写方式。基本语法是：基本语法：当箭头函数没有参数或者有多个参数，要用 () 括起来。当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。当箭头函数要返回对象的时候，为了区分于代码块，要用 () 将对象包裹起来2.适合使用的场景ES6 之前，JavaScript 的 this 对象一直很令人头大，回调函数，经常看到 var self = this 这样

2022-07-13 09:06:55 317

原创 ES6-数组

1.数组创建Array.of()：将参数中所有值作为元素形成数组。Array.from()：将类数组对象或可迭代对象转化为数组。参数说明：Array.from(arrayLike[, mapFn[, thisArg]])arrayLike：想要转换的类数组对象或可迭代对象。mapFn：可选，map 函数，用于对每个元素进行处理，放入数组的是处理后的元素。thisArg：可选，用于指定 map 函数执行时的 this 对象。类数组对象：一个类数组对象必须含有 length 属性，

2022-07-12 23:20:17 295

原创 ES6-对象

1.对象字面量属性的简洁表示法：ES6允许对象的属性直接写变量，这时候属性名是变量名，属性值是变量值。方法也可以简写：属性名表达式：ES6允许用表达式作为属性名，但是一定要将表达式放在方括号内。注意点：属性的简洁表示法和属性名表达式不能同时使用，否则会报错。2.对象的扩展运算符拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象。基本用法可用于合并两个对象注意：自定义的属性和拓展运算符对象里面属性的相同的时候1.自定义的属性在拓展运算符后面，则拓展运算符对

2022-07-12 20:13:03 126

原创 String（字符串）

1.子串的识别ES6 之前判断字符串是否包含子串，用 indexOf 方法，ES6 新增了子串的识别方法includes()：返回布尔值，判断是否找到参数字符串。startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。以上三个方法都可以接受两个参数，需要搜索的字符串，和可选的搜索起始位置索引注意：这三个方法只返回布尔值，如果需要知道子串的位置，还是得用 indexOf 和 lastIndexOf 。这三个方法如果传

2022-07-12 19:19:28 64

原创 arr-map-set的转换

数组转map:必须是二维数组 map转数组: Array.from() 静态方法数组转集合集合转数组多个数组转集合和map

2022-07-12 18:38:00 51

原创 Symbol

es5中基本数据: null undefined number boolean stringes6新增的基本数据: Symbol它是一个内置全局函数,生成一个独一无二的数据

2022-07-12 17:01:03 57

原创 Map 和 Set

1.MapMap 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。Map中的key key是字符串、对象、函数、NaN Map特点：有序、键值对（键可以是任意类型）、键名不能重复（如果重复，那么覆盖）Map的迭代：对Map进行遍历 for...of forEach()Map对象的操作 Map与Array的转换 Map的克隆 Map的合并Map和Object的区别：- 一个 Object 的键只能是字符串

2022-07-11 20:22:25 58

原创 ES6 - 解构赋值

（1）概述解构赋值是对赋值运算符的扩展。是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。（2）解构模型在解构中，有下面两部分参与：解构的源，解构赋值表达式的右边部分。解构的目标，解构赋值表达式的左边部分。（3）数组模型的结构（Array）基本...

2022-07-08 20:24:13 129

原创 let、const

let 声明的变量只在 let 命令所在的代码块内有效（块级作用域、局部作用），ES6 推荐在函数中使用 let 定义变量，而非 var。const 声明一个只读的常量，一旦声明，常量的值就不能改变。

2022-07-08 19:34:02 60

原创 ES6初识

对浏览器内核的了解？有哪些内核？浏览器要渲染出网页给用户看，必须加载html编码和js脚本，渲染引擎渲染页面的UI和js执行引擎操作内存，就是浏览器的重要组成程序：内核根据不同浏览器厂商他们使用不同的内核，内核的程序是很难实现的，很据我的了解有一些内核是公司自己实现的有一些是直接借用的，比如：1、IE浏览器内核：Trident内核，也是俗称的IE内核；2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；3、Firefox浏览器内核：Gec

2022-07-08 12:22:42 135

原创 36.html-弹性盒子基础

CSS弹性盒子相对于普通盒子更为灵活容器项目容器：设置了弹性盒子的这个盒子就叫容器项目：容器地方子元素就称为项目怎么设置弹性盒子：display：flex 主轴与交叉轴主轴：我们规定水平或者垂直方向是主轴方向默认是水平方向---元素默认在主轴方向上排列交叉轴：与主轴垂直的方向默认垂直方向容器的属性： ...

2022-04-01 22:17:25 302

原创 35.html-CSS3过渡，inline-block间隙

过渡： transition：property（要过渡的属性）：想要变化的css属性，宽度高度，背景颜色，转换，内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以 duration（花费的时间）：单位是秒（必须写单位）比如0.5s timing-function（运动曲线）：单位是ease（可以省略） delay（延迟时间）：单位是秒（必须写单位）可以设置延...

2022-04-01 22:15:07 157

原创 34.html-CSS转换

2D转换： CSS转换：使元素改变形状、尺寸和位置的一种效果 transform： translate 平移： /* 水平平移正值向右负值向左 */ /* 竖直平移正值向下负值向上 */ /* 综合写第一个水平第二个数值 */ rotate 旋转：/* 以元素中心旋转...

2022-04-01 22:10:26 400

原创 33.html-盒子隐藏

盒子隐藏: 1.真实的隐藏元素会让子元素一起隐藏子元素不能通过设置display；block进行反隐藏 2.visibility visible; 显示 hidden; 隐藏还是会继续占据空间会隐藏子元素子元素不能通过设置visibility:hidden;进行反隐藏 3.opacity；0; 0-1完全透明-完全不透明 opacity；0; ...

2022-03-31 22:51:35 992

原创 32.html-定位

固定定位：定位：position static：静态定位标准文档流表现的形式一样 fixed：固定定位相对于body进行定位---不写偏移量属性---默认状态相对于浏览器窗口进行定位---要写偏移量属性 relative：相对定位 absolute：绝对定位定位和偏移量属性连用： to...

2022-03-31 22:48:46 332

原创 31.html-浮动

文档流：从上到下从左到右块级子元素一般在父元素中从上到下排列行内子元素一般在父元素中从左到右排列浮动：元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止(会挨着父元素左边或右边排列，如果之前有浮动的饿元素会挨着浮动的元素排列)，由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。浮动特性： ...

2022-03-31 22:40:35 99

原创 30.html-IE标准盒模型

IE: 会压缩内容部分达到设置padding border的时候不会增大盒子的宽高的我们设置的width height属性就是实际的宽高标准：默认值盒子实际宽高在设置的width height的属性之上还要加上 padding border 色盒子只包含了content内容部分标准：---IE box-sizing：border-box IE：---标准 box-sizing：content-box...

2022-03-31 22:33:22 140

原创 29.html-盒子边框、阴影、外边距合并

边框： border-width：用于指定边框的粗细。 border-style：用于定义边框的样式。 border-color：用于设置边框的颜色。 /* border：边框宽度样式颜色四个方向都是一样的 */ /* border：2px solid red； */ /* soild：实线 dotted：点线 dashed：虚...

2022-03-29 22:45:58 752

原创 28.html-盒子模型-内外边距

.内边距：边框与内容之间的距离<!-- 盒模型内边距：padding padding-top：上内边距 padding-right：右内边距 padding-bottom：下内边距 padding-left：左内边距 padding的合并设置： padding:30px;四个方向都一样的30px的内边距 padding：30px 60px;上下30px 左右...

2022-03-28 23:34:24 2474

原创 27.html-凹凸文字、空心文字、精灵图

凹凸文字（示例）： div{ font-size: 120px; background-color: rgb(33,177,104); color: rgb(33,177,104); font-weight: 700; } .fa .tu{ /* 水平阴影位置垂直阴影位置模糊距离阴影颜色 */ te...

2022-03-28 23:24:53 549

原创 26.html-CSS背景简写、缩放、图片附着、颜色渐变、多背景

背景简写: background: 背景颜色背景图片地址背景平铺背景滚动背景位置 background: blue url('../资源/') no-repeat scroll 0 0;背景缩放： /* 1.设置固定值缩放 */ background-size: 300px 200px; /* 2. 百分比设置百分比时，参照盒子的宽高 */ ...

2022-03-28 00:03:01 437

原创 25.html-CSS背景

/* background-color: transparent;背景颜色透明 */ background-image: url('../../'); /* 背景平铺默认效果 xy方向都平铺 */ background-repeat: repeat; /* 背景平铺 x方向平铺 */ background-repeat: repeat-x; ...

2022-03-27 23:53:46 195

原创 24.html-标签显示模式及转换

<!-- 显示模式display行内元素：inline行内块级：inline-block块级：block其他显示模式的标签转换为inline-block：display：inline-block;其他显示模式的标签转换为inline：display：inl

2022-03-27 23:51:27 1515

原创 23.html-CSS复合选择器权重计算

/* 复合选择器权重计算需要将复合选择器拆分将每一个选择器的权重加起来 *//* 比较权重计算四个数从左到右依次比较如果出现相等就继续比较下一项如果直接已经比出大小大的那个权重更高 */权重计算规则：(1)内联样式，如: style="", 权值为1, 0, 0, 0。(2) ID选择器，如: #content, 权值为0, 1, 0, 0。(3) 类,伪类和属性选择器，如.content E:link E[attr]，权值为0，0, 1, 0。(4)元素选择器和伪元素选择器.

2022-03-27 23:49:59 352

原创 22.html-CSS特性

层叠性： /* CSS层叠性:是浏览器处理冲突的一个能力。如果一个css属性通过两个选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉 */ /* 谁覆盖谁：CSS权重（优先级）就近原则先看权重（CSS书写权重选择器）如果权重高，则覆盖另一个属性权重一样，看就近原则后来者居上 */优先级： !important > 行内 > 内部 = 外部（ID > 类 &g...

2022-03-27 23:42:08 656

原创 21.html-属性、伪元素选择器

属性选择器： /* 1.选中页面上type属性值等于password的所有元素 */ [type="password"]{ background-color: aqua; } /* 2.选中页面上只要有name属性的所有元素 */ [name]{ background-color: blueviolet; } /* 3.1.选中页面上name属性值包...

2022-03-27 23:35:05 276

原创 20.html-复合选择器

交集选择器： /* 标签选择器（元素选择器）标签名元素名只要匹配到对应的标签名元素名就会被选中 */ /* div{} */ /* 交集选择器:既...又... 既要求元素名（标签名）是div 又要求原色的class属性值包含base 两个标签挨在一起中间不能有空格 */ div.base{ background-color: chartreuse; }...

2022-03-26 23:05:16 770

原创 19.html-基础选择器(2)

结构伪类2： /* 选中所有li元素，如果这个li元素是其父元素中的第一个li类型的子元素就匹配成功 */ li:first-of-type{ color: blue; } /* 选中所有span元素，如果这个span元素是其父元素中的第一个span类型的子元素就匹配成功 */ span:first-of-type{ color: chartreuse; } ...

2022-03-25 21:49:15 447

原创 18.html-基础选择器

id选择器：  <div id="box1">box1</div> <div id="box2">box2</div> <!-- id选择器具有唯一性只能设置一个值，其他人不饿能再使用同样的id值就像身份证号每个人只能有...

2022-03-24 22:37:11 248

原创 17.html-文本属性

color：/* 颜色的表示方法：颜色名字：英文单词 red blue yellow 十六进制取值0-f 0-9 a-f 一个颜色两位表示，一共六位 #00abcc 颜色值前面加# rgb：一共是三个取值取值范围0-255/0-100% rgb(200,99,9) rbga(200,99,9,)a表...

2022-03-24 22:26:58 1020

原创 16.html-字体属性

div{ font-size: large; /* font-size:small */ /*Chrome浏览器的默认字体大小为16px*/ /*px是一个相对长度单位相对于电脑分辨率*/ font-size: 100px; } header{ /*数字：100-900 由细变粗 1...

2022-03-24 21:56:17 340

原创 15.html-CSS认识，标签选择器，书写权重

<!-- CSS是什么？ html 骨架皮囊---CSS 层叠样式表美化网页 html CSS在html页面中的书写方式 1.行内样式：直接通过标签的属性style 键值对方式去写的键名：键值; 键值组合每一项之间用空格隔开 2.内部样式：style标签写在head标签里面通过选择器去标识body中的元素选择器{ 键名1 键值1; 键名2...

2022-03-22 21:59:11 278

原创 14.html-多媒体

<embed src="" ><!-- audio：加载音频 audio属性： src：音频资源的地址 controls:显示控件 muted：静音播放 loop：循环播放 aut...

2022-03-22 21:49:41 850

原创 13.html-常用新标签（接上一篇）

fieldset：  <form action="" style="width: 400px;"> <fieldset> <legend>注册</legend> 用户名：<input type="text"> <br>&lt...

2022-03-21 22:06:06 180

原创 12.html-h5新增的各种东西

h5新增的结构标签：<header style="height: 50px; background-color: blueviolet;" >定义网页的头部</header> <nav style="height: 50px; background-color: blue;">定义网页的导航区域</nav> <div class="left" style="float: left; width: 70%;" > &...

2022-03-21 21:41:39 322

原创 11.html-表单

表单：form 块级双标签 action：表单内容提交的服务器地址 method：get post(提交方式) input标签 input的type属性 text：文本输入框 password:密码输入框 radio：单选按钮一组单选按钮需要让name属性一致 checkbox：多选框 ...

2022-03-20 20:30:45 417

空空如也

空空如也