前提说明：以下的内容是学习总结的，包含主要的css3/html5知识，但是也会再涉及之前css2和html4的一些知识。
基本选择器：
通配符选择器 *
元素选择器 div
类选择器 .class
ID选择器 #id
后代选择器 div p
选择器分组 div,p
其他选择器
子代选择器：.father>.child
兄弟选择器：.father>.child1 + .child2 这被称为一个相邻兄弟选择器. 它只会匹配紧跟着的兄弟元素
通用兄弟选择器：
在使用 ~ 连接两个元素时,它会匹配第二个元素,
条件是：它必须跟(不一定是紧跟)在第一个元素之后,且他们都有一个共同的父元素
属性选择器：
[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
[name]{ background: pink;}
[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
[name="atguigu_llc"]{ background: pink;}
[attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，
比如位于被空格分隔的多个类（class）中的一个类。
[attr|=val] : 选择attr属性的值以val（包括val）或val-开头的元素
[attr^=val] : 选择attr属性的值以val开头（包括val）的元素。
[attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
[attr*=val] : 选择attr属性的值中包含字符串val的元素。链接伪类：
a:link
a:visited
a:hover
a:active
表单伪类
input:enabled{ color:red;}
input:disabled{ color:blue;}
input:checked{ width:100px;height:100px;}
input:focus{ background: pink;}
结构化伪类选择器
ul > li:nth-child(3) { background: #f00;}
ul > li:nth-child(odd) { background: red;}
ul > li:nth-child(even) { background: blue;}
:first-child { border: 1px solid;}
:last-child { border: 1px solid;}
ul > li:nth-last-child(3) { background: #f00;}
article:only-child { background: #f00;}
div:nth-of-type(2) { color: #f00;}
div:first-of-type { color: #f00;}
div:last-of-type { color: #f00;}
div:nth-last-of-type(2) { color: #f00;}
article:only-of-type { background: #f00;}
div > a:not(:last-of-type) { border-right: 1px solid red;}表示不包含最后一个
div:empty { background: #f00;}表示对div内容是空的进行样式设置
div::after {
content: "我在内容的后面";
}
div::before {
content: "我在内容的前面";
}
div::first-letter {表示对div内容的第一各字母进行样式设置
color: #f00;
font-size: 24px;
font-weight: bold;
}
div::first-line {对div内容的第一行内容进行设置
color: #f00;
font-weight: bold;
}
div::selection {表示对选中的内容进行设置
background: red;
color: pink;
}设置元素的透明度：opacity，数值最小越透明，数值越大越不透明
background: rgba(0,0,0,.5);另外一种设置颜色的方式，第四个参数可以用于设置颜色的透明度
text-shadow文字阴影
使用格式：text-shadow: h-shadow v-shadow blur-radius color [inset];
inset表示设置的阴影是向内
h-shadow：水平方向的阴影偏移量
v-shadow：垂直方向的阴影偏移量
blur-radius：模糊半径，用于控制阴影的模糊程度
color：设置阴影的颜色
模糊背景：filter: blur(像素)，括号中的像素越大越模糊，越小越清晰
文字描边：-webkit-text-stroke: width color;
width表示描边的宽度
设置省略号
white-space: nowrap;表示内容不换行
overflow: hidden;表示溢出隐藏
text-overflow: ellipsis;
text-overflow:
clip：默认值，表示文本溢出时直接裁剪隐藏。
ellipsis：当文本溢出时，显示省略号（"..."）来表示被截断的文本。
string：可以是任何字符串值，用于自定义文本溢出时的显示内容。盒子阴影
box-shadow: h-offset v-offset blur spread color [inset];倒影：
-webkit-box-reflect：允许在元素的底部添加一个镜像反射效果。
-webkit-box-reflect: below;
direction：指定反射的方向，'above'（从上方反射）、'below'（从下方反射）或 'left'（从左侧反射）。
-webkit-box-reflect: below/above/left
offset：指定反射的偏移量，可以是百分比值或长度值。
-webkit-box-reflect: below/above/left 50px;
-webkit-box-reflect: right 10px
linear-gradient(-90deg, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 0) 80%);重置盒子大小
resize: both;垂直水平都重置
resize: horizontal;重置水平方向
resize: vertical;重置垂直方向是一个用于控制盒模型计算方式的 CSS 属性
box-sizing: border-box;
这样元素的总宽度和总高度不会受到边框和内边距的增加而改变，内容区域的尺寸会相应减少。圆角
border-radius
border-radius: value1 value2 value3 value4;
value1：左上角的圆角半径。
value2：右上角的圆角半径。
value3：右下角的圆角半径。
value4：左下角的圆角半径。
/* 所有角都具有相同的圆角半径 */
border-radius: 10px;
/* 左上角和右下角具有 10px 的圆角半径，右上角和左下角具有 20px 的圆角半径 */
border-radius: 10px 20px;
/* 左上角具有 10px 的圆角半径，右上角和左下角具有 20px 的圆角半径，右下角具有 30px 的圆角半径 */
border-radius: 10px 20px 30px;
/* 分别指定四个角的圆角半径 */
border-radius: 10px 20px 30px 40px;圆角应用实例
风车
<!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>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
position: absolute;
top: 50%;
left: 50%;
margin: -105px 0 0 -105px;
width: 210px;
height: 210px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
transition: all 4s linear;
}
.child {
width: 100px;
height: 100px;
background-color: pink;
}
.child:nth-child(1),
.child:nth-child(4) {
border-radius: 0 50px;
}
.child:nth-child(2),
.child:nth-child(3) {
border-radius: 50px 0;
}
.box:hover {
transform: rotateZ(360deg);
}
</style>
<body>
<div class="box">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>border-image-source 是一个用于设置边框图片源的 CSS 属性。
它允许你使用一张图片来定义元素的边框样式，而不是使用传统的边框样式。
border-image-source: none | <image> | <linear-gradient>;
none：表示不使用图片作为边框的源，使用普通的边框样式。
<image>：指定一个图片路径，可以是相对路径或绝对路径。
<linear-gradient>：指定一个线性渐变作为边框的源。
/* 不使用图片作为边框的源 */
border-image-source: none;
/* 使用名为 border.png 的图片作为边框的源 */
border-image-source: url(border.png);
/* 使用线性渐变作为边框的源 */
border-image-source: linear-gradient(to right, red, blue);
border-image-source 属性通常与 border-image-slice、border-image-width 和 border-image-repeat 等属性一起使用，以定义边框图片的切割、宽度和重复规则。
.border-image-example {
border-image-source: url(border.png);
border-image-slice: 10;
border-image-width: 20px;
border-image-repeat: round;
}
双颜色值的线性渐变
background-image:linear-gradient(red,blue);
多颜色值的线性渐变
background-image:linear-gradient(red,blue,pink,black);
改变渐变方向
background-image:linear-gradient(to top left,red,blue);
使用角度改变方向
background-image: linear-gradient(0deg, red, blue);
控制颜色节点的分布
background-image:linear-gradient(90deg,red 10%,orange 15%,yellow 20%,green 30%,blue 50%,indigo 70%,violet 80%);
透明度的渐变
background-image:linear-gradient(90deg,rgba(255,0,0,0) 50%,rgba(255,0,0,0.5),rgba(255,0,0,1) 60%);
重复渐变
background: repeating-linear-gradient(90deg,red 10%,blue 30%);
发廊色
background:repeating-linear-gradient(45deg ,black 0,black 10px,#fff 10px,#fff 20px);
应用实例：
<style>
body {
background-color: #000;
text-align: center;
}
.box {
text-align: center;
font-size: 100px;
font-weight: bold;
display: inline-block;
background-image: linear-gradient(
120deg,
#999 100px,
#fff 180px,
#999 270px
);
-webkit-background-clip: text;
color: transparent;
background-position: 0 0;
animation: donghua 2s linear infinite;
}
@keyframes donghua {
to {
background-position: 500px 0;
}
}
</style>
<body>
<div class="font">
<div class="box">前端工程师</div>
</div>
</body>径向渐变，就是渐变呈现的是圆形
1、双颜色值的径向渐变
background-image: radial-gradient(red, blue);
2、多颜色值的径向渐变
background-image: radial-gradient(red,blue,pink,black);
3、不均匀分布
background-image: radial-gradient(red 50%, blue 70%);
4、改变渐变形状
background-image:radial-gradient(ellipse,red,blue);
circle：创建一个圆形的径向渐变。
ellipse：创建一个椭圆形的径向渐变。
closest-side：创建一个以最近边为半径的径向渐变。
farthest-side：创建一个以最远边为半径的径向渐变。
closest-corner：创建一个以最近角为半径的径向渐变。
farthest-corner：创建一个以最远角为半径的径向渐变。
5、渐变形状的尺寸大小
background-image:radial-gradient(farthest-corner ellipse,red,blue);
6、改变圆心
background-image:radial-gradient(closest-corner circle at 10px 10px,red,blue);
7、重复渐变
background-image:repeating-radial-gradient(closest-corner circle,red 30%,blue 50%);transition-property:width,background;需要过渡的属性
transition-duration:3s;过渡的时长
transition-timing-function:steps(5,end);过渡的速度
transition-delay:2s;过渡延迟的时间
transition:width 2s linear 4s,height 4s linear 2s;过渡的简写，可以指定多个过渡情况
实例练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,user-scalable=no"
/>
<title>扇形打开</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.fa-box {
position: absolute;
top: 10px;
left: 10px;
width: 300px;
height: 300px;
border: 1px solid pink;
}
.box::before {
content: "基点";
}
.box,
.child {
position: absolute;
top: 10px;
left: 10px;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
border-radius: 50%;
background-color: skyblue;
}
.box > .child {
top: 0;
left: 0;
background-color: pink;
transition: all 0.5s linear;
}
.child:nth-child(2) {
transition-delay: 0.1s;
}
.child:nth-child(3) {
transition-delay: 0.2s;
}
.fa-box:hover .child:nth-child(1) {
transform: translate3d(100px, 0, 0) rotateZ(360deg);
}
.fa-box:hover .child:nth-child(2) {
transform: translate3d(60px, 60px, 0) rotateZ(360deg);
}
.fa-box:hover .child:nth-child(3) {
transform: translate3d(0, 100px, 0) rotateZ(360deg);
}
</style>
<body>
<div class="fa-box">
<div class="box">
<div class="child">姓名</div>
<div class="child">电话</div>
<div class="child">地址</div>
</div>
</div>
</body>
</html>旋转、平移、斜切、缩放
transform: rotate(360deg);
transform: translateX(300px);
transform: skewY(-30deg);
transform: scale(0.5);
基点变化
transform-origin: 100px 100px;
应用实例（transform: skewY(-30deg);）：斜体图像滑入动画
<!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>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 10px;
left: 10px;
animation: donghua 1s linear;
}
@keyframes donghua {
from {
transform: skewX(30deg);
}
to {
transform: skewX(0deg) translateX(300px);
}
}
</style>
<body>
<div class="box"></div>
</body>
</html>3D旋转、平移、缩放
transform: rotateX(120deg);
景深
perspective: 200px;
通过在父盒子上设置适当的 perspective 值，并对子盒子应用适当的 3D 变换效果，可以产生一种景深的视觉效果。
rotate(angle)
rotateX(angle)
rotateY(angle)
rotateZ(angle)
rotate3d(x,y,z,angle)
transform: rotate3d(1, 1, 1, 360deg);
/*transform: translateZ(200px);*/
transform: translate3d(0,0,200px);
缩放
transform: scaleZ(2) translateZ(100px) ;
开启3D效果
transform-style: preserve-3d;哪个盒子需要进行3D效果就在哪个盒子设置
隐藏背面内容
backface-visibility: hidden;
应用实例：
<!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>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.fa-box {
position: absolute;
top: 100px;
left: 100px;
border: 1px solid red;
width: 300px;
height: 300px;
perspective: 200px;
}
.box {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
transform-style: preserve-3d;
transition: all 2s;
transform-origin: center center -50px;
}
.box > .child {
width: 100%;
height: 100%;
text-align: center;
line-height: 100px;
background-color: pink;
font-weight: bold;
font-size: 30px;
backface-visibility: hidden;
position: absolute;
}
.child:nth-child(2) {
left: -100px;
transform-origin: right;
transform: rotateY(-90deg);
}
.child:nth-child(3) {
transform: rotateY(-180deg) translateZ(100px);
}
.child:nth-child(4) {
right: -100px;
transform-origin: left;
transform: rotateY(90deg);
}
.child:nth-child(5) {
top: -100px;
transform-origin: bottom;
transform: rotateX(90deg);
}
.child:nth-child(6) {
bottom: -100px;
transform-origin: top;
transform: rotateX(-90deg);
}
.fa-box:hover .box {
transform: rotateX(360deg);
}
</style>
<body>
<div class="fa-box">
<div class="box">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
</div>
</div>
</body>
</html>动画
@keyframes rotate{
0% {
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
animation-name: rotate;动画名称
animation-duration: 10s;动画持续时间
animation-timing-function: ease;动画速度
animation-delay: 1s;动画延迟时间
animation-iteration-count: infinite;动画执行次数，infinite表示无数次，也可以使用数值1、2、3等
animation-direction: alternate-reverse;动画执行方向，alternate-reverse表示往返
animation-fill-mode: forwards;用于定义动画在播放前和播放后的样式状态，
none：默认值，表示动画不会影响动画播放前和播放后元素的样式状态。
forwards：在动画结束后，元素将保持动画最后一帧的样式状态。
backwards：在动画播放前（等待延迟时间时）应用动画的第一帧样式状态。
both：结合 forwards 和 backwards，动画播放前应用第一帧样式状态，动画结束后保持最后一帧样式状态。
animation-play-state 用于控制动画的播放状态
running：默认值，表示动画正在运行。
paused：表示动画被暂停
animation简写形式，按照上面的顺序对应下来就行响应式布局
1、媒体查询
@media only screen {
.box{
background:yellow;
}
}
2、媒体特性
@media screen and (max-width:800px) and (min-width:400px) {
.box{
background:yellow;
}
}
3、横竖屏切换
@media screen and (orientation:landscape) {
.box{
background:yellow;
}
}
orientation: landscape; 是一个 CSS 属性，用于指定设备或浏览器的方向为横向（横屏）模式。它主要应用于响应式设计中，以根据设备的方向来调整页面布局和样式。
4、像素比
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.box{
background: yellow;
}
}
5、响应式
@media screen and (min-width: 800px) {
.wrap {
border: 1px solid #000;
font: 14px/28px "宋体";
color: #000;
text-indent: 2em;
-webkit-column-count: 4;
-webkit-column-gap: 30px;
-webkit-column-rule: 1px solid #000;
}
}
@import url("indexc.css") screen and (min-width: 400px) and
(max-width: 800px);
@media screen and (max-width: 400px) {
.wrap {
border: 1px solid #000;
font: 16px/28px "宋体";
color: #000;
text-indent: 2em;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px solid #000;
}
}Html5优势
1、跨平台:唯一一个通吃PC MAC Iphone Android等主流平台的跨平台语言
2、快速迭代
3、降低成本
4、导流入口多
5、分发效率高
1、动态添加删除类
addClass classList.add() classList.remove()
const testNode = document.querySelector(".testNode");
testNode.classList.add("qhf4");
testNode.classList.remove("qhf1");
testNode.classList.toggle("qhf2");//交换添加删除类名
2、获取设置属性
node.getAttribute(某个属性)
node.dataset(某个以data-开头命名的自定义属性)
node.属性
node.setAttribute(自定义属性,属性值)
node.dataset.属性 = 属性值，用于设置自定义属性
node.属性 = 属性值设置div等元素可以进行编辑
在元素身上加上contenteditable="true"属性配置，或者可以使用js动态加上
<div contenteditable="true">张三</div>怪异盒模型
在 HTML 中，有两种文档渲染模式：标准模式（"CSS1Compat"）和怪异模式（"BackCompat"）。
这些模式决定了浏览器如何解析和渲染 HTML 和 CSS。
通过 document.compatMode 属性，可以获取当前文档所处的渲染模式。如果输出结果为 "CSS1Compat"，
则表示文档处于标准模式；如果输出结果为 "BackCompat"，则表示文档处于怪异模式。
在标准模式下，浏览器会按照规范的标准解析和渲染文档，尽可能与最新的 HTML 和 CSS 规范保持一致。、
而在怪异模式下，浏览器会使用更旧的解析和渲染方式，以保持与旧版本浏览器的兼容性。
怪异模式（Quirks Mode）是一种浏览器渲染模式，它在以下情况下会被触发：
1、缺少文档类型声明（DOCTYPE）：如果 HTML 文档中没有正确的文档类型声明，
或者声明不完整或格式错误，浏览器将进入怪异模式
2、使用过时的文档类型声明：某些旧的文档类型声明可能会触发怪异模式。
例如，使用过时的 HTML 4.01 Transitional 或 HTML 3.2 的文档类型声明。
3、Internet Explorer 5/6 条件注释：在旧版本的 Internet Explorer（IE 5 和 IE 6）中，
通过条件注释来包含特定的 CSS 或 JavaScript 代码可能会触发怪异模式
通过在js中执行console.log(document.compatMode);输出当前的文档渲染模式，正常是在标准模式下的。HTML5的语义化标签
<header> 定义了文档的头部区域
<article> 定义页面独立的内容区域。
<section> 定义文档中的节（section、区段）。
<aside> 定义页面的侧边栏内容。
<footer> 定义 section 或 document 的页脚。
<details> 用于描述文档或文档某个部分的细节
<summary> 标签包含 details 元素的标题
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<nav> 定义导航链接的部分。
<progress> 定义任何类型的任务的进度。
<ruby> 定义 ruby 注释（中文注音或字符）。
<rt> 定义字符（中文注音或字符）的解释或发音。
<rp> 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<datalist> 定义一个预定义选项列表，供用户在输入表单字段时进行选择
<!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>
html,
body {
width: 100%;
height: 100%;
}
body {
display: flex;
flex-direction: column;
overflow: hidden;
}
header {
flex: 90%;
}
header nav ul.info {
height: 50px;
background-color: pink;
line-height: 50px;
display: flex;
}
li {
list-style: none;
margin-right: 30px;
}
footer {
flex: 10%;
}
aside {
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
background-color: pink;
position: absolute;
top: 100px;
right: 20px;
}
aside:hover span:nth-child(1) {
transform: translate3d(-100px, 0, 0) rotateZ(360deg);
}
aside:hover span:nth-child(2) {
transform: translate3d(-70px, 70px, 0) rotateZ(360deg);
}
aside:hover span:nth-child(3) {
transform: translate3d(0px, 100px, 0) rotateZ(360deg);
}
aside::before {
content: "基点";
}
aside span {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: pink;
text-align: center;
line-height: 50px;
transition: all 1s;
}
ruby:nth-child(n + 2) {
margin-right: 20px;
}
</style>
</head>
<body>
<header>
<nav>
<ul class="info">
<li>姓名</li>
<li>地址</li>
<li>电话</li>
</ul>
</nav>
<aside><span>姓名</span><span>地址</span><span>电话</span></aside>
<article>
<details>
<summary>如何一夜暴富</summary>
<section>
<mark style="background-color: red">多做梦！</mark>多学习！
</section>
</details>
</article>
<article>
<!-- ruby标签是给拼音加上注音，需要使用rt标签配置使用 -->
<ruby>
<span>魑魅魍魉</span>
<rt>chi mei wang liang</rt>
</ruby>
<br />
<ruby>
<span>魑</span>
<rt>chi</rt>
</ruby>
<ruby>
<span>魅</span>
<rt>mei</rt>
</ruby>
<ruby>
<span>魍</span>
<rt>wang</rt>
</ruby>
<ruby>
<span>魉</span>
<rt>liang</rt>
</ruby>
</article>
<article>
<p>Welcome, <bdi>مرحبا بك</bdi>!</p>
</article>
<article>
<input type="text" list="myData" placeholder="输入内容" />
<datalist id="myData">
<option value="张三">张三</option>
<option value="李四">李四</option>
<option value="王五">王五</option>
<option value="赵六">赵六</option>
</datalist>
</article>
</header>
<footer>
这是页脚
<span>手机电量</span>
<meter
value="29"
max="100"
min="0"
low="10"
high="20"
optimum="90"
></meter>
<span>当前进度：</span>
<progress max="100" value="20"></progress>
</footer>
</body>
</html>画布canvas
1、基本用法
<body>
<canvas id="test" width="300" height="300">
<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
</canvas>
</body>
<script type="text/javascript">
window.onload = function () {
//querySelector身上有坑
//拿到画布
var canvas = document.querySelector("#test");
if (canvas.getContext) {
// 用于获取 Canvas 元素的绘图上下文
var ctx = canvas.getContext("2d");
}
};
</script>填充矩形： ctx.fillRect(x,y,width,height);
<body>
<canvas
id="myCanvas"
width="200"
height="100"
style="border: 1px solid #000000"
>
</canvas>
<script>
var c = document.getElementById("myCanvas");
// 获取canvas元素的绘图上下文
var ctx = c.getContext("2d");
// 设置填充的样式
ctx.fillStyle = "#FF0000";
// 设置填充的矩形长宽
ctx.fillRect(0, 0, 150, 75);
/* 第一个参数：x 坐标
表示矩形左上角的 x 坐标值，即矩形的起始点在水平方向上的位置。
第二个参数：y 坐标
表示矩形左上角的 y 坐标值，即矩形的起始点在垂直方向上的位置。
第三个参数：矩形宽度
表示矩形的宽度，以像素为单位。
第四个参数：矩形高度
表示矩形的高度，以像素为单位。 */
</script>
</body>canvas路径：
<canvas width="200" height="100" style="border: 1px solid red"></canvas>
<script>
window.addEventListener("load", function () {
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
/*
beginPath()
新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
moveTo(x, y)
把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。
closePath()
闭合路径之后，图形绘制命令又重新指向到上下文中
stroke()
通过线条来绘制图形轮廓
fill()
通过填充路径的内容区域生成实心的图形
*/
/*
方法 描述
fill() 填充当前绘图（路径）。
stroke() 绘制已定义的路径。
beginPath() 起始一条路径，或重置当前路径。
moveTo() 把路径移动到画布中的指定点，不创建线条。
closePath() 创建从当前点回到起始点的路径。
lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条。
clip() 从原始画布剪切任意形状和尺寸的区域。
quadraticCurveTo() 创建二次贝塞尔曲线。
cpx 贝塞尔控制点的 x 坐标。
cpy 贝塞尔控制点的 y 坐标。
x 结束点的 x 坐标。
y 结束点的 y 坐标。
bezierCurveTo() 创建三次贝塞尔曲线。
cp1x 第一个贝塞尔控制点的 x 坐标。
cp1y 第一个贝塞尔控制点的 y 坐标。
cp2x 第二个贝塞尔控制点的 x 坐标。
cp2y 第二个贝塞尔控制点的 y 坐标。
x 结束点的 x 坐标。
y 结束点的 y 坐标。
arc() 创建弧/曲线（用于创建圆形或部分圆）。
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角，以弧度计（弧的圆形的三点钟位置是 0 度）。
eAngle 结束角，以弧度计。
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
arcTo() 创建两切线之间的弧/曲线。
isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false。
*/
/* ctx.font = "30px Arial";
ctx.strokeStyle = "red";
ctx.strokeText("张三", 30, 30);
ctx.stroke(); */
/* ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.fillText("张三", 30, 30);
ctx.fill(); */
/* ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.strokeStyle = "red";
ctx.stroke(); */
/* ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.strokeStyle = "red";
ctx.stroke(); */
/* ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(100, 100);
ctx.lineTo(20, 100);
ctx.closePath();
ctx.strokeStyle = "red";
ctx.stroke();
ctx.fillStyle = "pink";
ctx.fill(); */
ctx.rect(20, 20, 100, 50);
ctx.stroke();
ctx.clip();
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 200, 100);
/* ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(20, 100, 200, 20);
ctx.strokeStyle = "red";
ctx.stroke(); */
/* ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 100, 200, 200, 20);
ctx.strokeStyle = "red";
ctx.stroke(); */
/* ctx.beginPath();
ctx.arc(100, 50, 40, 0, 2 * Math.PI);
ctx.strokeStyle = "pink";
ctx.stroke(); */
/* ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(100, 20);
ctx.arcTo(150, 20, 150, 70, 50);
ctx.lineTo(150, 100);
ctx.stroke(); */
// ctx.rect(20, 20, 150, 70);
// ctx.strokeStyle = "red";
// if (ctx.isPointInPath(40, 40)) {
// ctx.stroke();
// }
});
</script>beginPath() closePath()
beginPath() 是一个 Canvas 2D 上下文的方法，用于开始一个新的路径或重置当前路径。
closePath() 用于将当前路径闭合，连接路径的起点和终点，形成一个封闭的图形
在 Canvas 中，路径是由一系列的线段、曲线和子路径组成的图形。通过使用绘图指令（如 moveTo()、lineTo()、arc() 等），可以构建路径
画圆形
<canvas width="200" height="100" style="border: 1px solid red"></canvas>
<script>
window.addEventListener("load", function () {
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
// arc(x,y,r,start,stop)
ctx.arc(100, 50, 40, 0, 2 * Math.PI);
// 实际上我们在绘制圆形时使用了 "ink" 的方法, 比如 stroke() 或者 fill().
// ctx.fillStyle = "red";
// ctx.fill();
ctx.stroke();
});
</script>canvas文本
<canvas width="200" height="100" style="border: 1px solid red"></canvas>
<script>
window.addEventListener("load", function () {
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
/*
使用 canvas 绘制文本，重要的属性和方法如下：
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
*/
ctx.font = "30px Arial";
/*
字体大小：
可以是像素值，例如 "12px"、"16px" 等。
也可以是以相对大小表示的字符串，例如 "small"、"large"、"x-large" 等。
字体系列：
表示要使用的字体系列，例如 "Arial"、"Verdana"、"Helvetica" 等。
字体样式：
可选属性，表示字体的样式，如 "normal"（正常）、"italic"（斜体）等。
字体粗细：
可选属性，表示字体的粗细程度，如 "normal"（正常）、"bold"（粗体）、"bolder"（更粗体）等。
*/
// ctx.fillText("张三", 5, 30);
ctx.strokeText("张三", 10, 50);
});
</script>
渐变
<canvas width="200" height="100" style="border: 1px solid red"></canvas>
<script>
window.addEventListener("load", function () {
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
/*
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。
*/
// 设置直线的路径
// ctx.moveTo(0, 0);
// ctx.lineTo(200, 100);
// // 设置渐变参数
// const grd = ctx.createLinearGradient(0, 0, 200, 100);
// grd.addColorStop("0", "red");
// grd.addColorStop("1", "white");
// // 给直接设置渐变
// ctx.strokeStyle = grd;
// ctx.stroke();
// const grd = ctx.createLinearGradient(0, 0, 200, 100);
// grd.addColorStop("0", "red");
// grd.addColorStop("1", "purple");
// ctx.fillStyle = grd;
// ctx.fillRect(0, 0, 200, 100);
// 使用 createLinearGradient():
/* const grd = ctx.createLinearGradient(0, 0, 200, 100);
grd.addColorStop("0", "red");
grd.addColorStop(".5", "pink");
grd.addColorStop("1", "white");
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 200, 100); */
// 使用 createRadialGradient():
const grd = ctx.createRadialGradient(100, 50, 20, 100, 50, 200);
grd.addColorStop("0", "red");
grd.addColorStop(".5", "pink");
grd.addColorStop("1", "white");
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 200, 100);
});
</script>图像
<img src="./img/2.webp" width="200" height="100" alt="图像" />
<br />
<canvas width="200" height="100" style="border: 1px solid red"></canvas>
<script>
window.addEventListener("load", function () {
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
// 把一幅图像放置到画布上, 使用以下方法:
// drawImage(image,x,y,width,height)
// x,y是放置图像的的x,y坐标，width，height分别是图像的宽高
const img = document.querySelector("img");
ctx.drawImage(img, 0, 0, 200, 100);
});
</script>填充颜色、阴影
<img src="./img/2.webp" width="30" alt="图像" />
<canvas width="200" height="100" style="border: 1px solid red"></canvas>
<script>
window.addEventListener("load", function () {
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
/*
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。
strokeStyle 设置或返回用于笔触的颜色、渐变或模式。
shadowColor 设置或返回用于阴影的颜色。
shadowBlur 设置或返回用于阴影的模糊级别。
shadowOffsetX 设置或返回阴影与形状的水平距离。
shadowOffsetY 设置或返回阴影与形状的垂直距离。
*/
// const grd = ctx.createLinearGradient(0, 0, 200, 0);
// grd.addColorStop("0", "#000");
// grd.addColorStop("1", "#fff");
// ctx.shadowColor = "#000";
// ctx.shadowBlur = "20px";
// ctx.shadowOffsetX = "20px";
// ctx.shadowOffsetY = "20px";
// ctx.fillStyle = grd;
// ctx.fillRect(0, 0, 200, 100);
// // console.log(ctx.fillStyle);
ctx.shadowBlur = 20;
ctx.shadowColor = "red";
ctx.shadowOffsetX = 20;
ctx.shadowOffsetY = 20;
ctx.fillStyle = "pink";
ctx.fillRect(30, 30, 100, 50);
});
</script>线条样式
<canvas width="200" height="100" style="border: 1px solid red"></canvas>
<script>
window.addEventListener("load", function () {
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
/*
属性 描述
lineCap 设置或返回线条的结束端点样式。
lineJoin 设置或返回两条线相交时，所创建的拐角类型。
lineJoin 属性设置或返回所创建边角的类型，当两条线交汇时。
lineWidth 设置或返回当前的线条宽度。
miterLimit 设置或返回最大斜接长度。只有设置bevel情况才可以使用
lineCap属性值
butt 默认。向线条的每个末端添加平直的边缘。
round 向线条的每个末端添加圆形线帽。
square 向线条的每个末端添加正方形线帽。
*/
/* ctx.beginPath();
ctx.lineWidth = 10;
ctx.moveTo(20, 20);
ctx.lineTo(100, 20);
ctx.lineCap = "round";
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = 10;
ctx.moveTo(20, 40);
ctx.lineTo(100, 40);
ctx.lineCap = "butt";
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = 10;
ctx.moveTo(20, 60);
ctx.lineTo(100, 60);
ctx.lineCap = "square";
ctx.stroke(); */
ctx.beginPath();
ctx.lineWidth = 10;
ctx.moveTo(20, 20);
ctx.lineTo(100, 50);
ctx.lineTo(20, 100);
ctx.lineJoin = "round"; //圆角
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = 10;
ctx.moveTo(50, 20);
ctx.lineTo(130, 50);
ctx.lineTo(50, 100);
ctx.lineJoin = "bevel"; //斜角
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = 10;
ctx.moveTo(80, 20);
ctx.lineTo(160, 50);
ctx.lineTo(80, 100);
ctx.lineJoin = "miter"; //尖角
ctx.stroke();
});
</script>矩形
<canvas width="200" height="100" style="border: 1px solid red"></canvas>
<script>
window.addEventListener("load", function () {
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
/*
方法 描述
rect() 创建矩形。
fillRect() 绘制"被填充"的矩形。
strokeRect() 绘制矩形（无填充）。
clearRect() 在给定的矩形内清除指定的像素
*/
/* ctx.rect(0, 0, 200, 100);
ctx.fillStyle = "red";
ctx.fill(); */
/* ctx.clearRect(0, 0, 200, 100);
ctx.fillStyle = "pink";
ctx.fillRect(0, 0, 200, 100);
// 相当于在已经存在的盒子中挖空
ctx.clearRect(20, 20, 50, 50); */
ctx.strokeStyle = "red";
ctx.strokeRect(0, 0, 100, 100);
});
</script>转换
<canvas width="200" height="100" style="border: 1px solid red"></canvas>
<script>
window.addEventListener("load", function () {
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
/*
scale() 缩放当前绘图至更大或更小。
context.scale(scalewidth,scaleheight);
scalewidth 缩放当前绘图的宽度（1=100%，0.5=50%，2=200%，依次类推）。
scaleheight 缩放当前绘图的高度（1=100%，0.5=50%，2=200%，依次类推）。
rotate() 旋转当前绘图。
context.rotate(angle);旋转角度，以弧度计。
translate() 重新映射画布上的 (0,0) 位置。
context.translate(x,y);
x 添加到水平坐标（x）上的值。
y 添加到垂直坐标（y）上的值。
transform() 替换绘图的当前转换矩阵。
context.transform(a,b,c,d,e,f);
a 水平缩放绘图。
b 水平倾斜绘图。
c 垂直倾斜绘图。
d 垂直缩放绘图。
e 水平移动绘图。
f 垂直移动绘图。
setTransform() 将当前转换重置为单位矩阵。然后运行 transform()。
context.setTransform(a,b,c,d,e,f);
a 水平缩放绘图。
b 水平倾斜绘图。
c 垂直倾斜绘图。
d 垂直缩放绘图。
e 水平移动绘图。
f 垂直移动绘图。
*/
/* ctx.strokeRect(5, 5, 20, 10);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 20, 10);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 20, 10);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 20, 10);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 20, 10); */
/* ctx.fillRect(20, 20, 100, 50);
ctx.fillStyle = "red";
ctx.rotate(Math.PI / 6);
ctx.fillRect(0, 0, 100, 50); */
/* ctx.fillRect(20, 20, 40, 50);
ctx.translate(20, 20);
ctx.fillRect(20, 20, 40, 50); */
/* ctx.fillStyle = "red";
ctx.fillRect(0, 0, 100, 40);
ctx.transform(1, 0.5, -0.5, 1, 10, 10);
ctx.fillStyle = "pink";
ctx.fillRect(0, 0, 100, 40);
ctx.transform(1, 0.5, -0.5, 1, 10, 10);
ctx.fillStyle = "purple";
ctx.fillRect(0, 0, 100, 40); */
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 100, 40);
ctx.setTransform(1, 0.5, -0.5, 1, 10, 10);
ctx.fillStyle = "pink";
ctx.fillRect(0, 0, 100, 40);
ctx.setTransform(1, 0.5, -0.5, 1, 10, 10);
ctx.fillStyle = "purple";
ctx.fillRect(0, 0, 100, 40);
});
</script>文本
<canvas width="200" height="100" style="border: 1px solid red"></canvas>
<script>
window.addEventListener("load", function () {
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
/*
font 设置或返回文本内容的当前字体属性。
context.font="italic small-caps bold 12px arial";
font-style 规定字体样式。可能的值：normal、italic、oblique
font-variant 规定字体变体。可能的值：normal、small-caps
font-weight 规定字体的粗细。可能的值：
normal、bold、bolder、lighter、100、200、300、400、500、600、700、800、900
font-size/line-height 规定字号和行高，以像素计。
font-family 规定字体系列。
caption 使用标题控件的字体（比如按钮、下拉列表等）。
icon 使用用于标记图标的字体。
menu 使用用于菜单中的字体（下拉列表和菜单列表）。
message-box 使用用于对话框中的字体。
small-caption 使用用于标记小型控件的字体。
status-bar 使用用于窗口状态栏中的字体。
textAlign 设置或返回文本内容的当前对齐方式。
textBaseline 设置或返回在绘制文本时使用的当前文本基线。
方法 描述
fillText() 在画布上绘制"被填充的"文本。
strokeText() 在画布上绘制文本（无填充）。
measureText() 返回包含指定文本宽度的对象。
measureText()方法返回一个对象，该对象包含以像素计的指定字体宽度，要测量的文本。
*/
ctx.font = "italic bold 30px Arial";
// 因为stroke画出的时边框文字，可以使用这个属性
ctx.lineWidth = 2;
// 必须放在前面strokeStyle前于strokeStyle
ctx.strokeStyle = "red";
// 可以认为是在strokeText设置的坐标的基础上往中间移动
ctx.textAlign = "center";
ctx.textBaseline = "middle";
const txt = "张三";
ctx.strokeText(txt, 100, 50);
// 用于创建img标签
const iconImage = new Image();
console.log(iconImage instanceof HTMLElement); //true
iconImage.src = "./img/2.webp";
iconImage.width = "200px";
iconImage.onload = function () {
// drawImage参数中需要对图片的宽度高度进行设置，不然图片会被放大
ctx.drawImage(iconImage, 0, 0, 200, 100);
};
document.querySelector("canvas").onclick = function () {
alert(1);
};
console.log(ctx.measureText(txt).width);
});
</script>图像绘制
<video
src="./img/1.mp4"
width="200px"
title="视频"
controls
autoplay
muted
></video>
<canvas width="200" height="200" style="border: 1px solid red"></canvas>
<script>
window.addEventListener("load", function () {
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
/*
drawImage() 方法在画布上绘制图像、画布或视频。
drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。
context.drawImage(img,x,y);
context.drawImage(img,x,y,width,height);
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度（伸展或缩小图像）。
height 可选。要使用的图像的高度（伸展或缩小图像）。
*/
/* const img = new Image();
img.src = "./img/2.webp";
img.width = "200px";
// 图片加载是异步的，这里需要使用onLoad或者使用定时器等
img.onload = function () {
// ctx.drawImage(img, 0, 0, 200, 100);
// 这里显示的是裁剪出来的那部分图片
ctx.drawImage(img, 0, 0, 20, 20, 0, 0, 20, 20);
}; */
const video = document.querySelector("video");
video.addEventListener("play", function () {
window.timer = window.setInterval(function () {
ctx.drawImage(video, 0, 0, 200, 200);
});
});
video.addEventListener("pause", function () {
clearInterval(window.timer);
});
video.addEventListener("ended", function () {
clearInterval(window.timer);
});
});
</script>像素操作
<canvas width="200" height="200" style="border: 1px solid red"></canvas>
<script>
window.addEventListener("load", function () {
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
/*
属性 描述
width 返回 ImageData 对象的宽度。
height 返回 ImageData 对象的高度。
data 返回一个对象，其包含指定的 ImageData 对象的图像数据。
data 属性返回一个对象，该对象包含指定的 ImageData 对象的图像数据。
重要：createImageData()、 getImageData() 和 putImageData() 方法，以获得更多关于 ImageData 对象的知识
对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：
R - 红色（0-255）
G - 绿色（0-255）
B - 蓝色（0-255）
A - alpha 通道（0-255; 0 是透明的，255 是完全可见的）
color/alpha 信息以数组形式存在，并存储于 ImageData 对象的 data 属性中。
以指定的尺寸（以像素计）创建新的 ImageData 对象：
var imgData=context.createImageData(width,height);
创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象（不会复制图像数据）：
var imgData=context.createImageData(imageData);
width ImageData 对象的宽度，以像素计。
height ImageData 对象的高度，以像素计。
imageData 另一个 ImageData 对象。
context.getImageData(x,y,width,height);
x 开始复制的左上角位置的 x 坐标（以像素计）。
y 开始复制的左上角位置的 y 坐标（以像素计）。
width 要复制的矩形区域的宽度。
height 要复制的矩形区域的高度。
context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
imgData 规定要放回画布的 ImageData 对象。
x ImageData 对象左上角的 x 坐标，以像素计。
y ImageData 对象左上角的 y 坐标，以像素计。
dirtyX 可选。水平值（x），以像素计，在画布上放置图像的位置。
dirtyY 可选。垂直值（y），以像素计，在画布上放置图像的位置。
dirtyWidth 可选。在画布上绘制图像所使用的宽度。
dirtyHeight 可选。在画布上绘制图像所使用的高度。
*/
/* // 创建一个ImageData对象
const imgData = ctx.createImageData(100, 100);
// 将ImageData上所有的点的rgba的值设置成红色配置
for (let i = 0; i < imgData.data.length; i += 4) {
// 表示红色
imgData.data[i + 0] = 255;
imgData.data[i + 1] = 0;
imgData.data[i + 2] = 0;
imgData.data[i + 3] = 255;
}
// 将ImageData放入到放回画布上。
ctx.putImageData(imgData, 10, 10); */
// 创建ImageData对象
const ImageData = ctx.createImageData(50, 50);
// 设置像素点
for (let i = 0; i < ImageData.data.length; i += 4) {
ImageData.data[i + 0] = 255;
ImageData.data[i + 1] = 0;
ImageData.data[i + 2] = 0;
ImageData.data[i + 3] = 255;
}
ctx.putImageData(ImageData, 10, 10);
const ImageData1 = ctx.createImageData(ImageData);
// 重新ctx.createImageData(ImageData)的ImageData对象没有原先的data数据，所以这里需要自己重新for
for (let i = 0; i < ImageData.data.length; i += 4) {
ImageData1.data[i + 0] = 0;
ImageData1.data[i + 1] = 255;
ImageData1.data[i + 2] = 0;
ImageData1.data[i + 3] = 255;
}
ctx.putImageData(ImageData1, 70, 10);
});
</script>globalAlpha、globalCompositeOperation
<canvas width="300" height="300" style="border: 1px solid red"></canvas>
<script>
/*
context.globalAlpha=number;
透明值。必须介于 0.0（完全透明） 与 1.0（不透明） 之间。
globalAlpha 属性设置或返回绘图的当前透明值（alpha 或 transparency）。
globalAlpha 属性值必须是介于 0.0（完全透明） 与 1.0（不透明） 之间的数字。
*/
/*
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 100, 50);
ctx.globalAlpha = 0.4;
ctx.fillStyle = "pink";
ctx.fillRect(40, 40, 100, 50); */
/*
globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有的）的图像上。
源图像 = 您打算放置到画布上的绘图。
目标图像 = 您已经放置在画布上的绘图。
默认值： source-over
JavaScript 语法： context.globalCompositeOperation="source-in";
*/
/*
值 描述
source-over 默认。在目标图像上显示源图像。
source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in 在目标图像中显示源图像。只有目标图像之内的源图像部分会显示，目标图像是透明的。
source-out 在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示，目标图像是透明的。
destination-over 在源图像上显示目标图像。
destination-atop 在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。
destination-in 在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示，源图像是透明的。
destination-out 在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示，源图像是透明的。
lighter 显示源图像 + 目标图像。
copy 显示源图像。忽略目标图像。
xor 使用异或操作对源图像与目标图像进行组合。
10. darken
保留重叠部分最黑的像素。(每个颜色位进行比较，得到最小的)
blue: #0000ff
red: #ff0000
11. lighten
保证重叠部分最量的像素。(每个颜色位进行比较，得到最大的)
blue: #0000ff
red: #ff0000
*/
// var gco = new Array();
// gco.push("source-atop");
// gco.push("source-in");
// gco.push("source-out");
// gco.push("source-over");
// gco.push("destination-atop");
// gco.push("destination-in");
// gco.push("destination-out");
// gco.push("destination-over");
// gco.push("lighter");
// gco.push("copy");
// gco.push("xor");
// for (n = 0; n < gco.length; n++) {
// document.write(
// "<div id='p_" + n + "' style='float:left;'>" + gco[n] + ":<br>"
// );
// var c = document.createElement("canvas");
// c.width = 120;
// c.height = 100;
// document.getElementById("p_" + n).appendChild(c);
// var ctx = c.getContext("2d");
// ctx.fillStyle = "blue";
// ctx.fillRect(10, 10, 50, 50);
// ctx.globalCompositeOperation = gco[n];
// ctx.beginPath();
// ctx.fillStyle = "red";
// ctx.arc(50, 50, 30, 0, 2 * Math.PI);
// ctx.fill();
// document.write("</div>");
// }
/* window.addEventListener("load", function () {
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 100, 100);
ctx.fillStyle = "blue";
ctx.globalCompositeOperation = "lighter";
ctx.fillRect(50, 50, 100, 100);
}); */
// 格式1：
/* window.addEventListener("load", function () {
const canvas = document.querySelector("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
// drawing code here
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 100, 100);
} else {
// canvas-unsupported code here
alert("画布出错");
}
}); */
// 格式2：
/* function draw() {
var canvas = document.getElementById("tutorial");
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
//开始代码
}
draw(); */
/* function draw() {
var canvas = document.querySelector("canvas");
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
// arc默认是逆时针画圆
ctx.arc(50, 50, 40, 0, Math.PI / 2, false);
ctx.stroke();
}
draw(); */
/* function draw() {
var canvas = document.querySelector("canvas");
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
for (var i = 0; i < 6; i++) {
for (var j = 0; j < 6; j++) {
ctx.fillStyle =
"rgb(" +
Math.floor(255 - 42.5 * i) +
"," +
Math.floor(255 - 42.5 * j) +
",0)";
ctx.fillRect(j * 50, i * 50, 50, 50);
}
}
}
draw(); */
/*
其他
方法 描述
save() 保存当前环境的状态。
restore() 返回之前保存过的路径状态和属性。
createEvent()
getContext()
toDataURL()
*/
/* var ctx;
function draw() {
var canvas = document.querySelector("canvas");
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, 150, 150); // 使用默认设置绘制一个矩形
ctx.save(); // 保存默认状态
ctx.fillStyle = "red"; // 在原有配置基础上对颜色做改变
ctx.fillRect(15, 15, 120, 120); // 使用新的设置绘制一个矩形
ctx.save(); // 保存当前状态
ctx.fillStyle = "#FFF"; // 再次改变颜色配置
ctx.fillRect(30, 30, 90, 90); // 使用新的配置绘制一个矩形
ctx.restore(); // 重新加载之前的颜色状态
ctx.fillRect(45, 45, 60, 60); // 使用上一次的配置绘制一个矩形
ctx.restore(); // 加载默认颜色配置
ctx.fillRect(60, 60, 30, 30); // 使用加载的配置绘制一个矩形
}
draw(); */
/* function draw() {
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, 300, 300);
ctx.save();
ctx.fillStyle = "red";
ctx.fillRect(30, 30, 240, 240);
ctx.save();
ctx.fillStyle = "pink";
ctx.fillRect(60, 60, 180, 180);
// ctx.restore()执行是按照save()被保存的逆序来的，后保存的先被重新加载
// restore()用来重新加载之前的颜色状态
ctx.restore();
ctx.fillRect(90, 90, 120, 120);
ctx.restore();
ctx.fillRect(120, 120, 60, 60);
}
draw(); */
/* function draw() {
const canvas = document.querySelector("canvas");
if (canvas.getContext) {
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(100, 100, 100, 100);
// ctx.translate(0, 0);
// ctx.rotate(Math.PI / 6);
ctx.transform(1.2, 0.5, -0.5, 1.2, 100, 100);
ctx.fillStyle = "pink";
ctx.fillRect(0, 0, 100, 100);
}
}
draw(); */
/* var ctx;
function draw() {
var canvas = document.querySelector("canvas");
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(20, 20, 100, 0, Math.PI * 2);
ctx.clip();
ctx.fillStyle = "pink";
ctx.fillRect(20, 20, 100, 100);
}
draw(); */
</script>签名案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: gray;
}
#test {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: white;
}
</style>
</head>
<body>
<canvas id="test" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
window.onload = function () {
var canvas = document.getElementById("test");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
}
canvas.onmousedown = function (ev) {
// 解决不同浏览器的获取事件对象的问题
ev = ev || window.event;
// 捕获鼠标事件
if (canvas.setCapture) {
canvas.setCapture();
}
// 开始画图
ctx.beginPath();
// 将鼠标移动的路径参数给ctx
ctx.moveTo(
ev.clientX - canvas.offsetLeft,
ev.clientY - canvas.offsetTop
);
document.onmousemove = function (ev) {
// ctx.save()
ev = ev || event;
ctx.lineTo(
ev.clientX - canvas.offsetLeft,
ev.clientY - canvas.offsetTop
);
const grd = ctx.createLinearGradient(0, 0, 500, 0);
grd.addColorStop("0", "red");
grd.addColorStop(".2", "pink");
grd.addColorStop(".4", "purple");
grd.addColorStop(".6", "blue");
grd.addColorStop(".8", "green");
grd.addColorStop("1", "yellow");
// ctx.strokeStyle = "pink";
ctx.strokeStyle = grd;
ctx.stroke();
// ctx.restore();
};
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null;
if (document.releaseCapture) {
document.releaseCapture();
}
};
return false;
};
};
</script>
</html>
视频标签以及属性
<!--
src="../image/视频.mp4"输入的是视频的存放路径
width 设置视频的宽度
height 设置视频的高度
controls 加上这个属性就可以控制播放，不加播放不了
muted 设置静音
autoplay 设置自动播放
loop 设置循环播放
poster="../image/bl1.jpg" 设置封面
preload="metadata" 设置预先加载数据
（这个属性存在三个值：none表示不加载、auto表示浏览器自适应加载
metadata表示加载一定量）
-->
<video
src="../image/视频.mp4"
controls
muted
autoplay
loop
poster="../image/bl1.jpg"
preload="metadata"
></video>音频标签以及属性
<!--
audio标签用来定义音频，它是双标签
属性 值 描述
src url地址 音频地址
controls 向用户显示音频控件（比如播放、暂停按钮）
autoplay 音频自动播放
muted 音频静音
loop 循环播放
preload auto
metadata
none 音频预加载，如果使用autoplay,则忽略该属性
-->
<audio src="" controls autoplay muted loop preload="auto"></audio>表单标签属性
<!--
下面两个属性需要配置使用，pattern 里面写正则表达式
placeholder使用与文字输入类的表单控件
required适用于除按钮外的其他表单控件
pattern多行输入不可用，且空的输入框不会验证，往往和required属性配置使用
required
pattern="\w{6}"
-->
<form action="#">
账号：<input
type="text"
name="account"
placeholder="请输入账号"
required
autocomplete="on"
pattern="\d"
maxlength="10"
minlength="6"
/><br />
密码：<input
type="password"
name="pwd"
placeholder="请输入密码"
required
pattern="^\d{3}\S{6}"
/><br />
性别：
<input type="radio" name="gender" value="male" />男
<input type="radio" name="gender" value="female" />女 <br />
爱好：
<input type="checkbox" name="hobby" value="smoke" />吸烟
<input type="checkbox" name="hobby" value="drink" />喝酒
<input type="checkbox" name="hobby" value="perm" />烫头 <br />
其他: <textarea name="other" placeholder="请输入其他内容"></textarea>
<input type="submit" value="提交" />
</form>新增的表单空间类型
<form action="#">
电话：
<input type="tel" name="telephone" required />
<br />
光照强度：
<input type="range" name="range" max="80" min="20" value="30" />
<br />
颜色：
<input type="color" name="color" /> 日期：<input
type="date"
name="date"
required
/>
<br />
月份：
<input type="month" name="month" required /> 周：<input
type="week"
name="week"
required
/>
<br />
时间：
<input type="time" name="time" required /> 日期+时间：<input
type="datetime-local"
name="time2"
required
/>
<br />
邮箱：
<input type="email" name="email" required />
<br />
url：
<input type="url" name="url" required />
<br />
数值：
<input type="number" name="number" step="2" max="80" min="20" required />
<br />
搜索：
<input type="search" name="keyword" required />
<br />
<input type="submit" value="提交" />
</form>全局属性
<!--
contentditable 表示元素是否可被用户编辑，可选值如下：true可编辑，false不可编辑
draggble 表示元素可以被拖动，可选值如下：true可拖动、false不可拖动
hidden 隐藏元素,隐藏之后是不占用位置的
spellcheck 规定是否对元素进行拼写和语法检查，可选值如下：true检查、false不检查
contextmenu 规定元素的上下文菜单，在用户鼠标右键点击元素时显示
data-* 用于存储页面的私有定制数据
-->
<div class="first" contenteditable="true" draggable="true">
Lorem ipsum <mark>dolor</mark>, sit amet consectetur adipisicing elit.
Deserunt voluptatem neque illo nemo, iure ullam molestias, voluptate autem
atque nesciunt doloremque accusantium quos molestiae. Totam optio
doloremque enim ratione placeat!
</div>
<!-- data-a="a"这样设置元素上面的自定义属性在后面使用js时操作方便 -->
<div class="second" spellcheck="true" data-a="a">
Lorem ipsum dolor sit amet consectetur.
</div>全局捕获
/* element.setCapture
* 在处理一个 mousedown 事件过程中调用这个方法来把全部的鼠标事件重新定向到这个元素，
直到鼠标按钮被释放或者 document.releaseCapture() 被调用。*/
/* document.releaseCapture
* 如果该 document 中的一个元素之上当前启用了鼠标捕获，则释放鼠标捕获。
通过调用 element.setCapture() 实现在一个元素上启用鼠标捕获。*/以上差不多就是一些主要的内容，我整理出来希望能帮到你！
4167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
