HTML5和CSS3一些基本概括
html5
1.新增了语义化标签
语言，语义。语言的意义就是标签的意义
意思就是这个标签的单词的意思就是他在页面中所充当角色的意思 header 头部 nav 导航 main 主要内容 footer 底部 article 文章 用来放文字段落的标签 aside右侧
2.html5兼容问题
IE9 行级元素设置宽度的时候 会失效 IE8以下爱的版本 不支持语义化标签 IE8的内核 无法解析 只能用js替代
第三种解决方案
1：通过dom就是手动创建标签 2：就是引入别人写好的一个js文件 html5shiv.js 这种方法就是我们打开网页的时候会去判断了浏览器版本 如果是IE且小于9版本 我们才去加载这个文件 如果不是 则不加载
3.html5新增标签
1.html5标签元素的新增
1：邮箱 <input type="email"> 2：电话 <input type="tel"> 3：网址 <input type="url"> 4：数量 <input type="number" value="0" max="100" min="0">里面一般设置最大值和最小值 5：颜色 <input type="color type="color"> 可以通过js来获取颜色 6：时间 <input type="time"> 7：日期 <input type="date"> 8：时间日期 <input type="datetime">大多数浏览起不支持这个 9：日期时间 <input type="datetime-local">
2.html5新增表单元素datalist
1.用来建立关联
datalist标签定义可选数据的列表。与input元素配合使用，就可以制作出输入值的下拉列表
input输入框的list属性值是datalist的id，这样datalist才能和input输入框关联起来。 datalist自身并不显示，只在需要配合input输入时才会自动显示出来。
2.新增监听
input标签中多了一个属性 pattern 是用来验证信息的 ^是以什么开头 \d是指数字(0-9) {}花括号里面的数字是几长度就是多少 $是以什么结尾
oninput 用户输入内容时触发 可用于移动端输入字数统计 oninvalid 验证不通过时 常与表单验证pattern(正则表达式 验证表单)属性搭配使用
3.html5新增进度条
1: progress 进度条标签
里面的属性有： max 最大值 value 当前进度 min 最小值
2: meter 度量器标签
当我们的当前值不在规定的较大或较小值之间 进度条会发生颜色变化
里面的属性有： height 规定当前的较高值 low 规定当前的较低值 max 最大值 value 当前进度 min 最小值
4.html5新增的音频
audio 音频标签
里面的属性值有： autoplay 音频立即播放 controls 展示播放控件 loop 音频播放结束 会重新播放 muted 静音 preload 在页面加载的时候 预备播放 与autoplay冲突
5.html5新增视频
1.video视频标签
里面的属性有： src 路径 controls 播放面板 autoplay 自动播放 loop 自动循环 poster 首次进入视频的封面图 height 视频高度 weight 视频宽度
为了更好的兼容浏览器
2.video视频中的功能（js篇）
window.onload是指页面加载完再调用
1.播放功能
play表示播放
pause表示暂停
paused表示当前状态
btn[0].οnclick=function(){// play()函数表示播放 pause()就表示暂停console.log(video.paused);// 当视频暂停的时候 值位true if(video.paused){// paused表示当前状态 video.play();this.innerText="暂停"}else{video.pause();this.innerText="播放"}
}
2.变大，变小功能
宽高里面的数值不能带px
btn[1].οnclick=function(){video.width="1000"}// 变小btn[2].οnclick=function(){video.width="300"}
3.快进，快退功能
video.duration 视频的时长 单位是秒
video.currentTime当前时长
btn[3].οnclick=function(){console.log(video.duration);//视频的时长 单位是秒console.log(video.currentTime);//当前播放时长if(video.currentTime+5>video.duration){video.currentTime=video.duration}else{video.currentTime+=5}}// 快退btn[4].οnclick=function(){console.log(video.duration);//视频的时长 单位是秒console.log(video.currentTime);//当前播放时长if(video.currentTime-5<0){video.currentTime=0}else{video.currentTime-=5}}
4.加速功能
video.playbackRate当前时长
加速
btn[5].οnclick=function(){console.log(video.playbackRate);//当前播放时长video.playbackRate=video.playbackRate*2}
0.5倍速
btn[6].οnclick=function(){console.log(video.playbackRate);//当前播放时长video.playbackRate=video.playbackRate*0.5}
1倍速
btn[6].οnclick=function(){console.log(video.playbackRate);//当前播放时长video.playbackRate=1}
5.声音调节
video.muted静音
静音
btn[8].οnclick=function(){video.muted=true
}
放大声音
volume 当前音量
video.volume设置音量
btn[9].οnclick=function(){console.log(video.volume);// 该值最大位1if(video.volume <0.9){video.volume+=0.1}else{video.volume=1}}
减小声音
btn[10].οnclick=function(){console.log(video.volume);// 该值最大位1if(video.volume <0.1){video.volume=0}else{video.volume-=0.1}}
CSS3
初识CSS3
-webkit-border-radius:20px;/* webkit指的是谷歌的浏览器内核 */ • -ms-border-radius:20px;/* ms指的是ie浏览器的内核 */ • -moz-border-radius:20px;/* moz指的是火狐浏览器的内核 */ • -o-border-radius:20px;/* o指的是opera浏览器的内核 */
1.设置透明度
三种透明度方式
常用的rgba 不会继承
opacity 这个属性会继承
transparent 表示全透明
2.阴影
1.盒子阴影
阴影属性
offset-x 必需 水平阴影的位置 正值 左边的边不会变 负值 右边的边不会变
offset-y 必需 垂直阴影的位置 正值 上面的边不会变 负值 下面的边不会变
blur 可选 blur-radius阴影模糊半径 0既无模糊效果 值越大阴影边缘越模糊
spread 可选 代表阴影的周长向四周扩展的尺寸 正值 阴影扩大 负值阴影缩小
color 可选 阴影的颜色
inset 可选 可以写在参数第一位或最后一位 其他无效 inset阴影在背景之上 内容之下
box-shadow:offset-x offset-y blur spread color inset
blur:模糊 spread:伸展 inset:内凹
box-shadow:x轴偏移量 y轴偏移量 阴影模糊半径 阴影扩展 阴影颜色 投影方式
2.文字阴影
text-shadow:h-shadow v-shadow blur color
h-shadow 水平阴影 跟盒子阴影位置一样
v-shadow 垂直阴影 跟盒子阴影位置一样
blur 表示阴影的距离
3.背景
背景：
背景颜色 background-color
背景图片 background
背景重复 background-repeat
背景图片居中 background-position:center top
背景附着 background-attachment:fixed
1.背景裁剪
css3中多了一个属性
background-clip
padding-box 把边框下面去掉
content-box 内边距下面 也没有背景
2.背景图片大小
background-size
3.渐变背景
background-image:linear-gradient(xdeg,color1,color2,color3)
xdeg就是颜色到哪个位置结束 to right 就是从左边开始到右边结束
1.渐变背景2
为了适应浏览器的不同 所以我们通常会在linear-gradient前面加上不同浏览器的内核
4.径向渐变
background-image:radial-gradient
为了适应不同浏览器的不同 所以我们也在这个前面加上不同浏览器的内核
5.多背景
background: url(../images/30/ab.png) content-box no-repeat center ,url(../images/30/xiaoming.jpg) padding-box;
6.插入图片的bug
一般我们插入图片时 两张图片之间会出现一个白边
解决方法
1.把图片转为块级元素
2.在style中img中添加vertical-align：middle
middle是垂直
4.2D动画
1.2D动画(过渡效果)
CSS3中的动画多了一个属性
transition:参数1 参数2 参数3 参数4
参数1 发生变换的属性名
参数2 变化的时间长
参数3 缓冲曲线(时间)
参数3 里面包括的属性值有
linear 匀速动画 cubic-bezier(0,0,1,1)/cubic-bezier(1,1,0,0)
ease-in 先慢后快 cubic-bezier(0.25,0.1,0.25,0.1)
ease-out 先快后满 cubic-bezier(0,0,0.58,1)
ease-in-out 慢快慢
参数4 等待时间(等待动画开始的时间)
<style>.box {width: 100px;height: 100px;background-color: red;/* transition(参数1，参数2，参数3，参数4)参数1:发生变化的属性名参数2:变化的时间(动画时长)参数3:缓冲曲线参数4:等待时间
*/transition: all 3s ease 3s;}.box:hover{width: 400px;height: 400px;background-color: aqua;margin: 30px;}</style>
2.2D变形(使图片发生一点变化)
多了一个属性
transform
rotate 变换的角度 旋转
skew 斜切 第一个参数表示y轴向x轴靠拢的度数 第二个参数表示 x轴向y轴靠拢的度数 负值表示先旋转180°
scale 缩放
translate 位移 第一个参数表示x轴位移的距离 第二个参数表示y轴位移的距离
5.3D动画
如果想让你的东西呈现为3D效果就需要用到一个属性
transform-style:preserve-3d
1.视距
出现了一个视距的属性
perspective 属性值越大 视距越小 属性值越小 视距越大
2.旋转
2D旋转和3D旋转差不多 只不过在transform:rotate 上用的更准确罢了 加上了X Y Z
3.位移
3D的位移和2D有点区别
2D的相当于在一个平面上进行操作
3D的就相当于一个立体的操作 所以在transform:translate上更为准确 要加上X,Y,Z 或者加上3D也行里面数值是三个 也是X,Y,Z
4.背面隐藏
就是新增了一个属性
backface-visibility:hidden;
5.正反面切换
里面的逻辑就是 在你最上面图片没开始转的时候 下面的图片先进行旋转到背面隐藏起来 然后当上面的图片旋转的时候下面的图片因为隐藏了没有 当上面的图片旋转了180°之后 下面的图片也开始旋转180°加上之前上面没变之前就旋转的180°等于旋转了360° 就实现了 正反面切换
6.选择原点进行变形
新增属性
transform-origin:0% 0%;
第一个0% 表现是在x轴
第二个0% 表现在y轴
6.自定义动画
1.自定义动画属性
animation
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
[name] 指定要绑定到选择器的关键帧的名称
[duration] 动画指定需要多少秒或毫秒完成
[timing-function] 设置动画将如何完成一个周期
[delay] 设置动画在启动前的延迟间隔。
[iteration-count] 定义动画的播放次数。
[direction] 指定是否应该轮流反向播放动画
[fill-mode] 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
[play-state] 指定动画是否正在运行或已暂停。
2.定义自定义动画属性
@keyframes
里面搭配的有from to
from 就是写从哪个地方开始
to 就是到哪里结束
也可以使用百分比进行使用 最好的就是百分比
3.项目展示
1.扇形导航
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>\* {margin: 0;padding: 0;}nav {width: 50px;height: 50px;position: fixed;/* 固定定位的坐标原点 就是浏览器窗口 */right: 0;bottom: 0;}.home{width: 50px;height: 50px;position: absolute;left: 0;top: 0;z-index: 3;border-radius: 50%;transition: all 0.5s;}body{background: violet;}img{border-radius: 50%;}ul{position: absolute;width: 42px;height: 42px;left: 4px;height: 4px;}li{list-style: none;position: absolute;left: 0;top: 0;width: 42px;height: 42px;transition: all 0.5s;}</style>
</head>
<body><nav><div class="home"><img width="100%" src="./img/home.png" alt=""></div><ul><li><img src="./img/clos.png" alt=""></li><li><img src="./img/full.png" alt=""></li><li><img src="./img/open.png" alt=""></li><li><img src="./img/prev.png" alt=""></li><li><img src="./img/refresh.png" alt=""></li></ul></nav>
</body><script>var home=document.getElementsByClassName('home')[0];var homedeg=0;var lis=document.getElementsByTagName("li");var isOpen=false;// 控制当前是展开还是收回home.οnclick=function(){homedeg+=360;// 让自己先旋转home.style.transform="rotate("+homedeg+"deg)";console.log(123);if(!isOpen){for(let i=0;i<5;i++){//一个角是90/4 22.5// 现在要根据角度计算偏移量var x=-200*Math.sin(22.5*i/180 * Math.PI);var y=-200*Math.cos(22.5*i/180 * Math.PI);lis[i].style.transform="translateX("+x+"px) translateY("+y+"px)";lis[i].style.transition="all 0.5s "+i*0.1+"s"lis[i].querySelector('img').style.transform="rotate(360deg)";lis[i].querySelector('img').style.transition='all 0.5s'}}else{for(let i=0;i<5;i++){//一个角是90/4 22.5// 现在要根据角度计算偏移量// var x=-200*Math.sin(22.5*i/180 * Math.PI);// var y=-200*Math.cos(22.5*i/180 * Math.PI);lis[i].style.transform="translateX("+0+"px) translateY("+0+"px)";lis[i].style.transition="all 0.5s "+(4-i)*0.1+"s"lis[i].querySelector('img').style.transform="rotate(0deg)";lis[i].querySelector('img').style.transition='all 0.5s'}}isOpen=!isOpen}
</script>
</html>
2.可乐项目
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.container{width: 200px;height: 340px;margin: 100px auto;overflow: hidden;position: relative;}.pingzi{width: 200px;height: 340px;position: absolute;background: url("./images/coke_can.png") no-repeat;background-size: 100%;z-index: 2;}.kele-bg{width: 1074px;height: 290px;position: absolute;left:0;top: 12px;background: url("./images/coke_bg.jpg");animation: kele 2s linear 0s infinite ;}/* 定义自定义动画 */@keyframes kele {from{left:0}to{left:-874px}}</style>
</head>
<body><div class="container"><div class="pingzi"></div><div class="kele-bg"></div></div>
</body>
</html>
3.旋转相册
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}div {width: 200px;height: 100px;margin: 200px auto;transform-style: preserve-3d;perspective: 1000px;position: relative;transform: rotateX(-15deg);}img {width: 200px;height: 100px;position: absolute;transition: transform 1s linear 0s;}/* img:nth-child(1){transform: rotateY(40deg) translateZ(400px);
}img:nth-child(2){transform: translateZ(400px);} */</style>
</head>
<body><div><img src="./img/img11.jpg" alt=""><img src="./img/img12.jpg" alt=""><img src="./img/img13.jpg" alt=""><img src="./img/img14.jpg" alt=""><img src="./img/img15.jpg" alt=""><img src="./img/img16.jpg" alt=""><img src="./img/img17.jpg" alt=""><img src="./img/img18.jpg" alt=""><img src="./img/img19.jpg" alt=""></div><button id="btn">点我一下</button>
</body>
<script>let imgs = document.querySelectorAll("img");let btn = document.getElementById("btn");let div = document.getElementsByTagName("div")[0];let step = 0;imgs.forEach((element, index) => {element.style.transform = "rotateY(" + index * 40 + "deg) translateZ(400px)"});btn.onclick = function () {step += 40;imgs.forEach((element, index) => {element.style.transform = "rotateY(" + (index * 40+step) + "deg) translateZ(400px)"});}
</script>
</html>
4.立体相册
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}div{margin: 100px auto;width: 200px;height: 200px;transform-style: preserve-3d;/* perspective: 600px; */position: relative;animation: xuanzhuan 5s linear 0s infinite;}img{width: 200px;height: 200px;position: absolute;left: 0;top: 0;opacity: 0.6;}@keyframes xuanzhuan {from{transform: rotateX(0deg) rotateY(0deg);}to{transform: rotateX(-360deg) rotateY(-360deg);}}/* 前 上 后 下 左 右 */img:nth-child(1){transform: translateZ(100px);}img:nth-child(2){transform: rotateX(90deg) translateZ(100px);}img:nth-child(3){transform: translateZ(-100px);}img:nth-child(4){transform: rotateX(-90deg) translateZ(100px);}img:nth-child(5){transform: rotateY(-90deg) translateZ(100px);}img:nth-child(6){transform: rotateY(90deg) translateZ(100px);}.inner{width: 100px;height: 100px;left: 50px;top: 50px;}.inner:nth-child(7){transform: translateZ(50px);}.inner:nth-child(8){transform: rotateX(90deg) translateZ(50px);}.inner:nth-child(9){transform: translateZ(-50px);}.inner:nth-child(10){transform: rotateX(-90deg) translateZ(50px);}.inner:nth-child(11){transform: rotateY(-90deg) translateZ(50px);}.inner:nth-child(12){transform: rotateY(90deg) translateZ(50px);}</style>
</head>
<body><div><img src="./img/1.jpg" alt=""><img src="./img/2.jpg" alt=""><img src="./img/3.jpg" alt=""><img src="./img/4.jpg" alt=""><img src="./img/5.jpg" alt=""><img src="./img/6.jpg" alt=""><img class="inner" src="./img/7.jpg" alt=""><img class="inner" src="./img/8.jpg" alt=""><img class="inner" src="./img/9.jpg" alt=""><img class="inner" src="./img/10.jpg" alt=""><img class="inner" src="./img/11.jpg" alt=""><img class="inner" src="./img/12.jpg" alt=""></div>
</body>
</html>
7.SVG
1.概念
以前的图片的格式有 jpg png gif jpeg
现在学了CSS3我们新增了一个SVG 位图矢量图
什么是位图矢量图？
理念：我们想用css3.0这种编程的方式 完成photoshop的功能
图片：用编程的形式 替换掉jpg png gif
所以诞生了矢量图 可以使用变成的形式画图
好处：
是用编程实现的 我们既可以将图片保存到外部
为什么css3 矢量图片想要用编程实现?
使用css3 矢量图片编程实现的功能相对文件小 效率高
1.rect画矩形
是一个做矩形的代码
context.rect(x,y,width,height);
x 矩形左上角的 x 坐标
y 矩形左上角的 y 坐标
width 矩形的宽度，以像素计
height 矩形的高度，以像素计
用法：
<body><svg xmlns="http://www.w3.org/2000/svg" width=300 height="600"><rect width="300" height="100"style="fill:yellow;stroke-width:10;stroke:turquoise"></svg> </body>
2.circle画圆
cx 和 cy 属性定义圆点的 x 和 y 坐标。
如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
stroke-width 边框粗细
fill 内部颜色
3.ellipse画椭圆
<ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"/>
cx 和 cy 属性定义圆点的 x 和 y 坐标。
rx 属性定义水平半径
ry 属性定义垂直半径
style 设置css格式 fill 内部颜色
stroke 边框的颜色
stroke-width 边框粗细
4.line直线
<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
X1属性表示起点的横坐标
Y1属性表示起点的纵坐标
X2属性表示终点的横坐标
Y2表示终点的纵坐标
stroke 边框的颜色
stroke-width 边框粗细
5.polygon多边形
<polygon points="220,100 300,210 170,250" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>
points 规定了绘制图形的时候的一系列坐标点
里面的坐标点可以看作 X1(100,10),X2(40,180),X3(190,60),X4(10,60),X5(160,180)
stroke 边框的颜色
stroke-width 边框粗细
6.polyline折线段的起点与终点用一根直线连接起来，形成一个闭合的图形区域
7.path 路径
8.canvas画布
用法：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 在这里我定义了一个画布 --><canvas width="800" height="500" id="cvs">您的浏览器不支持canvas</canvas>
</body>
<script>window.οnlοad=function(){// 第一步 得到我们的画布var cvs=document.getElementById('cvs')// 第二步 判断你的浏览器是否兼容canvasif(cvs.getContext){// 第三步 我们要设置画布类型 得到渲染的上下文var cvs_context=cvs.getContext('2d')// 第四步 填充颜色cvs_context.fillStyle="orange";// 第五步 绘制cvs_context.fillRect(200,200,200,200)// x, y, width, heightcvs_context.fillStyle="rgba(0,0,255,0.5)";cvs_context.fillRect(100,100,200,200)}}
</script>
</html>
1.绘画矩形参考
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>
• *{
• margin:0;
• padding: 0;
• }</style>
</head>
<body><canvas id="cvs" width="1800" height="800"></canvas>
</body>
<script>window.οnlοad=function(){let cvs=document.getElementById('cvs');if(cvs.getContext){// 绘制矩形let cvs_context=cvs.getContext("2d");cvs_context.fillStyle="skyblue";cvs_context.fillRect(50,0,100,100)
}}
</script>
</html>
2.绘制边框矩形参考
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>
• *{
• margin:0;
• padding: 0;
• }</style>
</head>
<body><canvas id="cvs" width="1800" height="800"></canvas>
</body>
<script>window.οnlοad=function(){// 绘制边框矩形let cvs=document.getElementById('cvs');if(cvs.getContext){let cvs_context=cvs.getContext("2d");cvs_context.strokeStyle="skyblue";cvs_context.lineWidth=3;cvs_context.rect(50,150,100,100)cvs_context.stroke();
}}
</script>
</html>
3.绘制线参考
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>
• *{
• margin:0;
• padding: 0;
• }</style>
</head>
<body><canvas id="cvs" width="1800" height="800"></canvas>
</body>
<script>window.οnlοad=function(){// 绘制边框矩形let cvs=document.getElementById('cvs');if(cvs.getContext){let cvs_context=cvs.getContext("2d");// 绘制线cvs_context.beginPath();//开始划线cvs_context.moveTo(50,360);//线的起始点cvs_context.lineTo(100,500);//线的终点cvs_context.lineWidth=10;cvs_context.strokeStyle="pink";cvs_context.stroke();
}}
</script>
</html>
4.绘制三角形参考
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>
• *{
• margin:0;
• padding: 0;
• }</style>
</head>
<body><canvas id="cvs" width="1800" height="800"></canvas>
</body>
<script>window.οnlοad=function(){// 绘制边框矩形let cvs=document.getElementById('cvs');if(cvs.getContext){let cvs_context=cvs.getContext("2d");// 绘制三角形cvs_context.beginPath();//开始划线cvs_context.moveTo(400,360);//线的起始点cvs_context.lineTo(300,500);//线的终点cvs_context.lineTo(500,500);//线的终点cvs_context.closePath();//关闭路径cvs_context.strokeStyle="pink";cvs_context.fill();cvs_context.stroke();
}}
</script>
</html>
5.画弧线参考
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>
• *{
• margin:0;
• padding: 0;
• }</style>
</head>
<body><canvas id="cvs" width="1800" height="800"></canvas>
</body>
<script>window.οnlοad=function(){// 绘制边框矩形let cvs=document.getElementById('cvs');if(cvs.getContext){let cvs_context=cvs.getContext("2d");// 画弧线cvs_context.moveTo(250,400);cvs_context.arc(150,400,100,0,2*Math.PI,false)// context.arc(x,y,r,sAngle,eAngle,counterclockwise);cvs_context.stroke();
}}
</script>
</html>
9.canvas绘制图片
绘制图片属性
drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
1.img 规定要使用的图像，画布或者视频
2.sx 可选 开始剪切的X坐标
3.sy 可选 开始剪切的y坐标
4.swidth 被剪切图像的宽度
5.sheight 被剪切图像的高度
6.x 在画布上放置图像的x坐标
7.y 在画布上放置图像的y坐标
8.width 要使用的图像的宽度
9.height 要使用的图像的高度
代码使用参考：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}ul{list-style: none;}canvas{border: 1px solid red;display: block;margin: 100px auto;}</style>
</head>
<body><canvas width="600" height="400" id="cvs"></canvas>
</body>
<script>window.οnlοad=function(){let canvas = document.getElementById("cvs");let ctx=canvas.getContext("2d");// 操作图片// 1.创建图片对象var img=document.createElement("img");// 2.设置图片img.src="./img/img22.jpg";// 3.图片加载完毕时间img.οnlοad=function(){// 4.绘制图片ctx.drawImage(img,0,0,500,img.height*500/img.width)/*drawImage1.img 规定要使用的图像，画布或者视频2.sx 可选 开始剪切的X坐标3.sy 可选 开始剪切的y坐标4.swidth 被剪切图像的宽度5.sheight 被剪切图像的高度6.x 在画布上放置图像的x坐标7.y 在画布上放置图像的y坐标8.width 要使用的图像的宽度9.height 要使用的图像的高度*/}}
</script>
</html>
参考项目
1.飞鸟案列
getContext 绘制画布的环境
clearRect 清除画布
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}canvas{border: 1px solid red;display: block;margin: 100px auto;}</style>
</head>
<body><canvas width="600" height="400" id="cvs"></canvas>
</body>
<script>var canvas=document.getElementById("cvs");var ctx=canvas.getContext("2d");// 控制你哪个鸟的高度let w=100;// 控制鸟的位置var left=-w;// 控制当前显示图片的标识数let index=0;setInterval(function(){// 清空画布ctx.clearRect(0,0,canvas.width,canvas.height);index++;// 1.创建图片资源var img = document.createElement("img");// 2.设置srcimg.src="./img/q_r"+ index%8 +".jpg";// 3.绑定事件img.οnlοad=function(){ctx.drawImage(img,left +=2,160,w,img.height*w/img.width)}},100)
</script>
</html>
2.颜色渐变
getContext绘制画布的环境
createLinearGradient(x,y,x1,y1)
x,y指定渐变起点
x1,y1指定渐变终点
canvas.width宽度
canvas.heiight高度
addColorStop(index,color)
index范围0-1
fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式
| color | 指示绘图填充色的 CSS 颜色值。默认值是 #000000。 |
|---|---|
| gradient | 用于填充绘图的渐变对象（线性或放射性） |
| pattern | 用于填充绘图的 pattern 对象 |
fillStyle填充线性渐变（从上到下）
fillStyle填充线性渐变（从左到右）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas></canvas>
</body>
<script>let canvas=document.querySelector("canvas");canvas.width=600;canvas.height=400;
// 获取画笔let ctx=canvas.getContext("2d");// 线性渐变 渐变的大小var gradient = ctx.createLinearGradient(0,0,600,400);// createLinearGradient (0,0,canvas.width,canvas.height)// 你要渐变的距离// 设置颜色gradient.addColorStop(0,"red");gradient.addColorStop(0.5,"yellow");gradient.addColorStop(1,"pink");// 修改填充样式ctx.fillStyle=gradient;// 填充矩形的大小ctx.fillRect(0,0,600,400)
</script>
</html>
3.径向渐变
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
x0 渐变的开始圆的 x 坐标 y0 渐变的开始圆的 y 坐标 r0 开始圆的半径 x1 渐变的结束圆的 x 坐标 y1 渐变的结束圆的 y 坐标 r1 结束圆的半径
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas></canvas>
</body>
<script>var canvas = document.querySelector('canvas');canvas.width = 600;canvas.height = 400;let ctx = canvas.getContext("2d");// 创建径向渐变var gradient = ctx.createRadialGradient(300, 200, 20, 300, 200, 200)// context.createRadialGradient(x0,y0,r0,x1,y1,r1);/*x0 渐变的开始圆的 x 坐标y0 渐变的开始圆的 y 坐标r0 开始圆的半径x1 渐变的结束圆的 x 坐标y1 渐变的结束圆的 y 坐标r1 结束圆的半径*/gradient.addColorStop("0","skyblue")gradient.addColorStop("0.5","pink")gradient.addColorStop("1","orange")
// 修改填充样式ctx.fillStyle=gradient;ctx.fillRect(0,0,600,400)
</script>
</html>
4.文字
fillText(string text, number x, number y, number maxWidth)
x和y分别表示文本距离左上角 x 和y坐标位置
strokeText(text,x,y,maxWidth)
text 是一个字符串文本。
x 表示文本的x坐标，也就是文本最左边的坐标。
y 表示文本的y坐标，也就是文本最下边的坐标（注意是最下边，而不是最上边）。
maxWidth 可选参数，表示允许的最大文本的宽度（单位为px）。如果文本宽度超出maxWidth值，文本会压缩至maxWidth值的宽度。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>canvas{border: 1px solid black;}</style>
</head>
<body><canvas></canvas>
</body>
<script>let canvas=document.querySelector("canvas");canvas.width=600;canvas.height=400;let ctx=canvas.getContext("2d");
ctx.beginPath();ctx.moveTo(100,0);ctx.lineTo(100,400)ctx.stroke()ctx.beginPath();ctx.moveTo(0,100);ctx.lineTo(600,100)ctx.stroke()
// 填充文字的方式 先设置再填充ctx.font="bold 30px 微软雅黑"
// 充实文字ctx.fillText("Hello canvas",100,90);// 镂空文字ctx.strokeText("Hello canvas",100,150)
</script>
</html>
5.阴影
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas></canvas>
</body>
<script>let canvas=document.querySelector("canvas");canvas.width=600;canvas.height=400;let ctx=canvas.getContext("2d");
var x=-20;var y=-20;var blur=0;setInterval(function(){ctx.clearRect(0,0,1000,1000)// 设置阴影ctx.shadowColor="red";ctx.shadowOffsetX=x++;ctx.shadowOffsetY=y++;ctx.shadowBlur=blur+=0.2;ctx.fillStyle="yellow"ctx.fillRect(100,100,200,200)},100)
</script>
</html>
6.画板
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><style>* {margin: 0;padding: 0;}
ul {list-style: none;}
#container {width: 800px;height: 500px;border: solid 1px #000;margin: 100px auto;position: relative;}
canvas {display: block;}
.color-setting {position: absolute;left: 5px;bottom: 0;width: 80px;height: 100px;}
.yellowgreen {background: yellowgreen;}
.color-setting div {width: 30px;height: 20px;margin-bottom: 10px;transition: width 0.5s;}
.pink {background: hotpink;}
.cyan {background: cyan;}</style>
</head>
<body>
<div id="container"><canvas width="800" height="500"></canvas>
<div class="color-setting"><div class="yellowgreen item"></div><div class="pink item"></div><div class="cyan item"></div></div>
</div>
<script>//获取元素var canvas = document.querySelector('canvas');var colorSetting = document.querySelector('.color-setting');var items = document.querySelectorAll('.item');
//var ctx = canvas.getContext('2d');
//标识变量 标识当前的鼠标是否按下var isDown = false;//绘制线段//绑定鼠标按下事件canvas.onmousedown = function (e) {//开始绘制ctx.beginPath();//移动到起始点ctx.moveTo(e.offsetX, e.offsetY);//修改标识变量的值isDown = true;}//鼠标移动canvas.onmousemove = function (e) {// if (!isDown) return;//ctx.lineTo(e.offsetX, e.offsetY);ctx.stroke();}
//鼠标抬起canvas.onmouseup = function () {//修改标识变量的值isDown = false;}//点击颜色切换画笔颜色colorSetting.onclick = function (e) {//if (e.target.classList.contains('item')) {//当前元素的背景颜色var color = getComputedStyle(e.target).backgroundColor;//改变画笔颜色ctx.strokeStyle = color;items.forEach(function (item) {item.style.width = '30px';})//当前色块宽度增加e.target.style.width = '50px';}}
</script>
</body>
</html>
/新手练习 大佬请留情/
HTML5和CSS3一些基本概括相关推荐
- [书籍精读]《响应式Web设计 HTML5和CSS3实战(第二版)》精读笔记分享
写在前面 书籍介绍:本书主要讲解了如何运用HTML5和CSS3来进行响应式Web设计,使页面的设计与开发根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)来进行相应的响应和调整. 我的简评:响 ...
- HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
- 使用modernizr.js检测浏览器对html5以及css3的支持情况
使用modernizr.js检测浏览器对html5和css3的支持情况 详情请看主页:modernizr主页 1. modernizr 是什么? modernize 是一个js库----一个用于检测当 ...
- 《HTML5与CSS3实战指南》——2.5 构建The HTML5 Herald
本节书摘来自异步社区<HTML5与CSS3实战指南>一书中的第2章,第2.5节,作者: [美]Estelle Weyl , Louis Lazaris , Alexis Goldstein ...
- modernizr 支持html5,使用modernizr.js检测浏览器对html5以及css3的支持情况
使用modernizr.js检测浏览器对html5和css3的支持情况 1.modernizr 是什么? modernize 是一个js库----一个用于检测当前浏览器对html5&css3 ...
- 《响应式Web设计：HTML5和CSS3实践指南》——2.9节基于位置伪类的交替行样式
本节书摘来自华章社区<响应式Web设计:HTML5和CSS3实践指南>一书中的第2章,第2.9节基于位置伪类的交替行样式,作者(美) Benjamin LaGrone,更多章节内容可以访问 ...
- 《HTML5与CSS3实例教程》
<HTML5与CSS3实例教程> 基本信息 作者: (美)Brian P. Hogan 译者: 卢俊祥 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:97871153634 ...
- 转载 - 使用HTML5、CSS3和jQuery增强网站用户体验
记得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验?是不是立刻就想到了flash实现?这彷佛年代久远的事了.使用现在最流行的Web技术HTML5,CSS3和jQuery,同样也可以实现类 ...
- 如何让低版本IE浏览器支持HTML5和CSS3
在默认状态下,低版本的IE浏览器是不支持HTML5和CSS3的,很多良好的效果都不能够使用,这不能不说是一种遗憾,为了弥补此种遗憾,因此产生了很多优秀的插件,下面就介绍比较常用的几种. 一.html5 ...
最新文章
- 给网站管理员的建议：创建可利用的、可抓取的网站
- Intellij Idea 多模块Maven工程中模块之间无法相互引用问题
- iOS开发内存管理总结
- 神奇的python（四）之logging日志文件系统
- 深圳 | 鹏程实验室研究员招收访问学生
- include做配置文件
- 《2021多多阅读报告》发布，95后、00后图书消费潜力攀升，大学生群体拼单量同比增长387%...
- JQuery.Ajax用法
- 易语言组合框基本属性方法事件
- 利用Python提取网络图片的像素尺寸、格式等相关信息
- win7耳机插前面没声音_win7电脑音箱没声音如何解决 win7电脑音箱没声音解决方式【图解】...
- 【车牌识别】基于模板匹配算法实现新能源车牌识别matlab源码
- 群晖DSM Docker下Xware迅雷远程下载教程
- 友盟统计使用及添加测试设备(设备ID及Mac地址识别)
- 前端面试八股文（详细版）—上
- 关于nofollow的问题
- LeetCode题解(1594)：矩阵从左上移动到右下的最大非负积(Python)
- 银行快消零售行业遏制数据泄露四驾马车
- 36 岁，我又跳槽了！
- 国内市场主流音视频产品的区别与对比分析