HTML5和CSS3一些基本概括-优快云博客

本文链接：https://blog.youkuaiyun.com/chengxuwa/article/details/120926119

本文介绍了HTML5的一些核心特性，如语义化标签、兼容性解决方案、新增表单元素和进度条等。同时，详细讲解了CSS3的透明度设置、阴影、背景、2D和3D动画等，帮助读者深入了解这两个技术的最新进展。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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].onclick=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].onclick=function(){
      video.width="1000"
    }
    // 变小
    btn[2].onclick=function(){
      video.width="300"
    }

3.快进，快退功能

video.duration 视频的时长单位是秒

video.currentTime当前时长

 btn[3].onclick=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].onclick=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].onclick=function(){
      console.log(video.playbackRate);//当前播放时长
      video.playbackRate=video.playbackRate*2
    }

0.5倍速

    btn[6].onclick=function(){
      console.log(video.playbackRate);//当前播放时长
      video.playbackRate=video.playbackRate*0.5
    }

1倍速

    btn[6].onclick=function(){
      console.log(video.playbackRate);//当前播放时长
      video.playbackRate=1
   }

5.声音调节

video.muted静音

静音

    btn[8].onclick=function(){
      video.muted=true
}

放大声音

volume 当前音量

video.volume设置音量

    btn[9].onclick=function(){
      console.log(video.volume);
    //  该值最大位1
      if(video.volume <0.9){
      video.volume+=0.1
      }else{
      video.volume=1
      }
    }

减小声音

    btn[10].onclick=function(){
      console.log(video.volume);
    //  该值最大位1
      if(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.onclick=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.onload=function(){
        // 第一步 得到我们的画布
        var cvs=document.getElementById('cvs')
        // 第二步 判断你的浏览器是否兼容canvas
        if(cvs.getContext){
            // 第三步 我们要设置画布类型 得到渲染的上下文
            var cvs_context=cvs.getContext('2d')
            // 第四步 填充颜色
            cvs_context.fillStyle="orange";
            // 第五步 绘制
            cvs_context.fillRect(200,200,200,200)
            // x, y, width, height
            cvs_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.onload=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.onload=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.onload=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.onload=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.onload=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.onload=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.onload=function(){
            // 4.绘制图片
            ctx.drawImage(img,0,0,500,img.height*500/img.width)
            /*
            drawImage
            1.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.设置src
        img.src="./img/q_r"+ index%8 +".jpg";
        // 3.绑定事件
        img.onload=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>

/新手练习大佬请留情/