HTML5的新特性--基础知识（4）

最新推荐文章于 2021-06-02 20:23:46 发布
最新推荐文章于 2021-06-02 20:23:46 发布
阅读量384 收藏
点赞数
分类专栏： H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LazyCode_Cat/article/details/60570646
版权
1、伪类顺序:一般遵循如下顺序,在低版本中防止不兼容问题
    lvha
     a:link{}
     a:visited{}
     a:hover{}
     a:active{}

 2、<a href="javascript:playMusic('小苹果','music/1.mp3')">小苹果</a>

 3、当歌曲能够播放时，将时长显示在00:00处
 canplaythrough事件

 事件：是一种行为
 方法：是一个操作
 属性：是一种状态，可以得到基本的信息值


 canvas是HTML中出现的新标签，像所有dom一样，拥有自己的属性、方法和事件，其中就有绘图方法，js能够调用它在网页上完成绘图。canvas也是HTML5中最强大的特性之一。允许开发者使用动态和交互式可视化方法在web上实现桌面应用程序的功能。

 在使用<canvas>元素时，要调用getContext()方法，其目的是得到画布的绘图上下文。通过这个引用，就可以使用其他的API进行绘图操作。
 语法：
   function initial(){
    var elem=document.getElementById('canvas');
    var canvas=elem.getContext('2d');
   }
 该方法可以接受两个值，2d和3d，分别表示2维和3维

 在准备好canvas后，就可以创建和绘制实际图形了，API提供的工具非常广发，包括创建图形、颜色、文本等。API中的一些方法

 绘制矩形方法（生成基础形状方法）：
 fillRect(x,y,width,height)绘制实心矩形,x,y是左上角的点坐标，默认填充黑色
 strokeRect(x,y,width,height)：绘制矩形，没有填充颜色，只有个矩形框
 clearRect(x,y,width,height)：绘制一个清除区域的矩形，可以


 绘制步骤：
 1.在页面中添加<canvas>标签
 2.在js中获取canvas的上下文getContext()
 3.绘制图形

 例：
 <!DOCTYPE HTML>
 <html>
  <head>
   <meta charset="utf-8"/>
   <title> New Document </title>
   <script>
     window.οnlοad=function(){
         //1.获取canvas元素
         var canvas=document.getElementById("canvas");
         //2.通过canvas元素获取绘图上下文
         var ctx=canvas.getContext("2d");
         //3.绘制各种各样的矩形
         ctx.fillRect(0,0,100,200); //绘制填充
         ctx.strokeRect(100,0,100,200);//绘制边框
         ctx.clearRect(0,0,200,100);//擦除指定区域
     }
   </script>
  </head>
  <body>
    <canvas id="canvas" width="400" height="300" style="border:1px solid #999;">您的浏览器不支持Canvas
    </canvas><!--canvas里面的文字能看到的话就说明浏览器不支持<canvas>,如果看不见就说明支持的-->
  </body>
 </html>




 canvas中实现颜色的方法：
 在创建图形时如果不设定颜色，那么所有图形都会使用默认颜色-纯黑色。设置颜色需要在先上色再画图形。
 可以通过以下属性指定绘图颜色：
 -strokeStyle:声明形状线条的颜色
 -fillStyle:声明形状内部区域的颜色。除了可以设置填充颜色，也可以设置填充内容，比如指定其他图像。
 -globalAlpha：透明度属性。可以设置画布上图形的透明度。


 渐变：
 canvas支持的渐变效果包括线性渐变或射线渐变，并且支持支持设置颜色转折点
 语法：
 createLinearGradient(x1,y1,x2,y2):在画布上创建一个渐变对象
 createRadialGradient(x1,y1,x2,y2):使用两个圆形在画布上创建一个渐变对象
 addColorStop(position,color):指定渐变颜色值,position取值为0~1之间

 例：
 var gra=ctx.createLinearGradient(0,150,400,150);
 gra.addColorStop(0,"red");
 gra.addColorStop(0.2,"yellow");
 gra.addColorStop(1,"blue");

 例1：
 <!DOCTYPE HTML>
 <html>
  <head>
   <meta charset="utf-8"/>
   <title> New Document </title>
   <script>
     window.οnlοad=function(){
         //1.获取canvas元素
         var canvas=document.getElementById("canvas");
         //2.通过canvas元素获取绘图上下文
         var ctx=canvas.getContext("2d");
         //3.绘制各种各样的矩形
         ctx.fillRect(0,0,100,200); //绘制填充
         ctx.strokeRect(100,0,100,200);//绘制边框
         ctx.clearRect(0,0,210,100);//擦除指定区域
         //4.指定填充颜色
         ctx.strokeStyle="rgb(255,0,0)";
         ctx.fillStyle="rgba(0,0,255,0.3)";
         //5.重新绘制矩形
         ctx.strokeRect(300,0,100,200);//绘制边框
         ctx.fillRect(200,0,100,200); //绘制填充
     }
   </script>
  </head>
  <body>
    <canvas id="canvas" width="400" height="300" style="border:1px solid #999;">您的浏览器不支持Canvas
    </canvas><!--canvas里面的文字能看到的话就说明浏览器不支持<canvas>,如果看不见就说明支持的-->
  </body>
 </html>




 例2：
 <!DOCTYPE HTML>
 <html>
  <head>
   <meta charset="utf-8"/>
   <title> New Document </title>
    <script>
      window.οnlοad=function(){
          var canvas=document.getElementById("canvas");
          ctx=canvas.getContext("2d");
          //1.创建渐变对象
          var gra=ctx.createLinearGradient(0,150,400,150);
          //2.指定渐变颜色
          gra.addColorStop(0,"red");
          gra.addColorStop(0.2,"yellow");
          gra.addColorStop(1,"blue");
          //3.通过渐变指定填充颜色
          ctx.fillStyle=gra;
          //4.绘制实心图形
          //ctx.fillRect(200,30,100,100);
          ctx.fillRect(0,0,400,300);
      }
    </script>
  </head>
  <body>
    <canvas id="canvas" width="400" height="300" ></canvas>
  </body>
 </html>



 创建路径：以上介绍的方法都是直接在画布上绘图，但是针对一些复杂图形的绘制，就需要自己通过路径进行描绘。路径就是画布移动的地图。
 方法：
 beginPath():开始一个新的形状描述。创建路径之前，必须先调用这个方法。
 closePath():关闭路径，用直线将最后一个点与原点相连，如果想保留开放路径，则不需要调用这个方法。

 默认情况下画完路径后看不到的，需要通过以下方式将路径显示出来：
 stroke():将路径绘制为轮廓形状
 fill():将路径绘制为实心形状。使用该方法时可以不用closePath关闭路径。该方法会通过直线连接最后一个点和第一个点实现关闭
 clip():上下文设置剪裁区域

 设置路径和创建真正的形状，有以下方法：
 moveTo():将笔触一道指定文字
 lineTo(x,y):从当前位置到指定位置(x,y)绘制一条直线
 rect(x,y,width,height):生成矩形路径
 arc(x,y,radius,startAngle,endAngle,direction):这里x,y是圆心位置，startAngle,endAngle要借助Math.PI来计算，是固定值，direction是画圆的方向，顺时针还是逆时针，是布尔类型，true表示逆时针，false表示顺时针。
 圆最右边的点弧度为0，是起始点，最左边的点弧度为Math.PI，是画半圆的终点。最下面的点弧度为Math.PI/2,最上面的点弧度为Math.PI*3/2,画整圆回到终点的时候，也就是起始位置,此时点的弧度为Math.PI*2


 例：画直角三角形
 <!DOCTYPE HTML>
 <html>
  <head>
   <meta charset="utf-8"/>
   <title> New Document </title>
    <script>
      window.οnlοad=function(){
          var canvas=document.getElementById("canvas");
          ctx=canvas.getContext("2d");
          //0.开始路径
          ctx.beginPath();
          //1.移动笔触到（180,50）
          ctx.moveTo(180,50);
          //2.从笔触位置到（180,50）连成一条直线
          ctx.lineTo(180,150);
          //3.从笔触（180,50）位置到（300,150）连成一条直线
          ctx.lineTo(300,150);
          //4.从笔触（300,150）到（180,50）连成一条直线
          ctx.lineTo(180,50);
          //5.闭合路径
          ctx.closePath();
          //6.填充或描边
          ctx.stroke();
      }
    </script>
  </head>
  <body>
    <canvas id="canvas" width="400" height="300" ></canvas>
  </body>
 </html>



 画半圆：
 <!DOCTYPE HTML>
 <html>
  <head>
   <meta charset="utf-8"/>
   <title> New Document </title>
    <script>
      window.οnlοad=function(){
          var canvas=document.getElementById("canvas");
          ctx=canvas.getContext("2d");
          //0.开始路径
          ctx.beginPath();
          ctx.arc(200,150,50,0,Math.PI,true);
          ctx.stroke();
          ctx.closePath();
      }
    </script>
  </head>
  <body>
    <canvas id="canvas" width="400" height="300" ></canvas>
  </body>
 </html>



 画布方法：
 状态方法：
 save():保存当前画布属性、状态
 restore():恢复画布属性、状态，恢复状态到最近的保存点，不论点击多少次恢复的都是最近的保存状态
 转换方法：
 scale():缩放当前绘图更大或更小,通过ctx.scale(x,y)进行缩放，调用之前的画布内容不会发生改变，之后绘制的东西，全部按照指定的倍数，进行显示
 translate():重新映射画布上的(0,0)位置.canvas的默认原点为(0,0)，通过设置translate(25,25)，原点则为(25,25)。此后再绘制ctx.fillRect(0,0,100,100)实际效果从(25,25)开始显示，如果又设置了translate(25,25)，此时原点变为(50,50)，因为translate(25,25)是在原来原点基础上加上新设置的值
 rotate():旋转当前画布，公式为degrees*Math.PI/180


 例：
 <!DOCTYPE HTML>
 <html>
  <head>
   <meta charset="utf-8"/>
   <title> New Document </title>
   <script>
     window.οnlοad=function(){
         var canvas=document.getElementById("canvas");
         ctx=canvas.getContext("2d");
     }
     //绘制UI个矩形轮廓
     function btn_drawRect(){
         ctx.strokeRect(0,0,100,100);
     }
     //将显示效果扩大两倍
     function btn_scale(){
         //通过ctx.scale(x,y)进行缩放，调用之前的画布内容不会发生改变，之后绘制的东西，全部按照指定的倍数，进行显示
         //x=1,y=1,表示原始大小
         //x<1,y<1,表示缩小倍数
         //x>1,y>1，表示扩大倍数
         ctx.scale(2,2);//扩大两倍
     }
     //更换原点，每次点击，在原来的基础上向右下移动25的距离
     function btn_translate(){
         ctx.translate(25,25);
     }
     //将画布按顺时针方向旋转指定的度数
     //度数：degree*Math.PI/180;
     function btn_rotate(){
         ctx.rotate(45*Math.PI/180);
     }
     //保存画布当前状态
     function btn_save(){
         ctx.save();
     }
     //恢复画布状态到最近保存点
     function btn_restore(){
         ctx.restore();
     }
   </script>
  </head>
  <body>
    <canvas id="canvas" width="400" height="300" style="border:1px solid #999;">您的浏览器不支持Canvas
    </canvas><!--canvas里面的文字能看到的话就说明浏览器不支持<canvas>,如果看不见就说明支持的-->
    <br/>
    <input type="button" value="绘制矩形" οnclick="btn_drawRect()" />
    <input type="button" value="扩大2倍" οnclick="btn_scale()" />
    <input type="button" value="更换原点" οnclick="btn_translate()" />
    <input type="button" value="旋转45度" οnclick="btn_rotate()" />
    <input type="button" value="保存画布当前状态" οnclick="btn_save()" />
    <input type="button" value="恢复状态到最近的保存点" οnclick="btn_restore()" />
  </body>
 </html>


 线型：到目前为止，所有画布都是用相同的线型，即默认线型
 lineWidth:修改线条粗细
 lineCap:指定线条端点形状，支持的值有butt(向线条的每个末端添加平直的边缘)、round（向线条的每个末端添加圆形线帽）、square（向线条的每个末端添加正方向线帽），注意：round和square会使线条略微变微长


 lineJoin两根线连接的点的形状：round（创建圆角）、bevel（创建斜角）、miter（默认，创建尖角）
 miterLimit：与lineJoin一起使用，表示交点的延伸范围

 例：
 <!DOCTYPE HTML>
 <html>
  <head>
   <meta charset="utf-8"/>
   <title> New Document </title>
   <script>
     window.οnlοad=function(){
         var canvas=document.getElementById("canvas");
         ctx=canvas.getContext("2d");
         //1、绘制普通的线段从(80,50),绘制(250,50)
         ctx.beginPath();
         ctx.moveTo(80,50);
         ctx.lineTo(250,50);
         ctx.closePath();
         ctx.stroke();
         //2.绘制一条宽度为10的线段(80,70)绘到(250,70)
         ctx.beginPath();
         ctx.moveTo(80,70);
         ctx.lineWidth="10";
         ctx.lineTo(250,70);       
         ctx.closePath();
         ctx.stroke();
         //3.绘制一条宽度为10的线段(80,90),(250,90)，线端使用圆帽(ctx.lineCap="round")
         ctx.beginPath();
         ctx.moveTo(80,90);
         ctx.lineWidth="10";
         ctx.lineCap="round"; //圆帽
         //ctx.lineCap="square";  方形
         ctx.lineTo(250,90);       
         ctx.stroke();//添加了圆帽后要先画再闭合
         ctx.closePath();
         //绘制两条线，形成锐角
         ctx.beginPath();
         ctx.lineWidth="10";
         ctx.lineJoin="bevel";
         //ctx.lineJoin="round";
         ctx.moveTo(80,100);
         ctx.lineTo(100,150);
         ctx.lineTo(100,100);
         ctx.stroke();
         ctx.closePath();
     }   
   </script>
  </head>
  <body>
    <canvas id="canvas" width="400" height="300" style="border:1px solid #999;">您的浏览器不支持Canvas
    </canvas><!--canvas里面的文字能看到的话就说明浏览器不支持<canvas>,如果看不见就说明支持的--> 
  </body>
 </html>


 视频最后没有结束


 绘制八卦图：
 <!DOCTYPE HTML>
 <html>
  <head>
   <meta charset="utf-8"/>
   <title> New Document </title>
   <script>
     window.οnlοad=function(){
         var canvas=document.getElementById("canvas");
         ctx=canvas.getContext("2d");
         ctx.beginPath();
         ctx.arc(250,250,200,0,Math.PI*2,true);
         ctx.stroke();
         ctx.closePath();
         ctx.beginPath();
         ctx.arc(250,250,200,Math.PI*3/2,Math.PI/2,true);
         ctx.fill();
         ctx.closePath();
         ctx.beginPath();
         ctx.arc(250,150,100,Math.PI*3/2,Math.PI/2,true);
         ctx.fillStyle="white";
         ctx.fill();
         ctx.closePath();
         ctx.beginPath();
         ctx.arc(250,350,100,Math.PI*3/2,Math.PI/2,false);
         ctx.fillStyle="black";
         ctx.fill();
         ctx.closePath();
         ctx.beginPath();
         ctx.arc(250,150,20,0,Math.PI*2,true);
         ctx.fillStyle="black";
         ctx.fill();
         ctx.closePath();
         ctx.beginPath();
         ctx.arc(250,350,20,0,Math.PI*2,true);
         ctx.fillStyle="white";
         ctx.fill();
         ctx.closePath();
     }   
   </script>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="border:1px solid #999;">您的浏览器不支持Canvas
    </canvas><!--canvas里面的文字能看到的话就说明浏览器不支持<canvas>,如果看不见就说明支持的-->
  </body>
 </html>
敲代码的猫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 Canvas 画布
大家好，我是 ed.
02-21 411
HTML5 Canvas 画布 什么是Canvas 　　Canvas 是 HTML5 新推出的元素标签，用户图形绘制。 　　和所有 DOM 元素一样，拥有自己的属性、方法和事件，其中包含绘图的方法。 　　通过 JavaScript 脚本可以调用绘图 API 在网页上完成绘图功能。 　　Canvas 是 HTML5 中最强大的特性之一。 　　允许开发者使用动态和交互的方法，在 Web ...
html5如何创建矩形,html5绘制矩形
weixin_39589511的博客
07-02 547
Titlevar canvas = document.getElementById("canvas");//获得绘画环境var cxt = canvas.getContext("2d");//填充颜色cxt.fillStyle = "#39e1ff";//绘制实心矩形 距离左边距，距离上边距，矩形长度，矩形高度cxt.fillRect(0,0,50,50);//清除cxt.clearRect(0,...
html5实心正方形,HTML5正方形黄金分割螺旋图
weixin_27015733的博客
05-30 283
JavaScript语言：JaveScriptBabelCoffeeScript确定$(function() {var WIN = $(window);var sections = $('.js-section');var spiral = $('.js-spiral')var _winW;var _winH;var smallScreen;var landscape;var aspect = ....
html绘制矩形_如何在HTML中绘制矩形
热门推荐
culi4814的博客
08-13 1万+
html绘制矩形If, for whatever reason, you sometimes feel like creating a rectangle using html/css, the below code is the easiest way to do so. A given rectangle can also be decorated using tags like backgr...
Html5之高级-6 HTML5 Canvas绘图(Canvas概述、Canvas绘图、处理 Canvas 中的图像)
weixin_34122810的博客
03-29 276
一、Canvas 概述Canvas概述- Canvas 是 HTML5 出现的新标签，像所有DOM一样，拥有自己的属性、方法和事件，其中就会绘图的方法，JavaScript 能够调用它在网页上完成绘图 - Canvas 也是 HTML5 中最强大的特性之一。允许开发者使用动态和交互式可视化方法在Web上实现桌面应用程序的功能创建 Canvas- <...
HTML5基础知识-Web简介.pptx
05-06
**HTML5基础知识与Web简介** **1. Web的诞生** Web的起源可以追溯到1989年，当时由蒂姆·伯纳斯-李（Tim Berners-Lee）创建了第一个Web服务器和第一个Web客户端，这标志着World Wide Web（WWW）的诞生。WWW成为了...
HTML5+CSS3入门基础知识
最新发布
12-29
HTML5+CSS3入门基础知识 HTML5 是下一代的 HTML 标准，旨在提高网页的可读性、可访问性和可维护性。CSS3 是最新的样式表语言标准，旨在提高网页的视觉效果和用户体验。本节课程将介绍 HTML5 和 CSS3 的基础知识，...
《前端基础知识大全》-完整版
12-07
6. HTML5新特性：HTML5添加了如语义化标签、增强型表单、Canvas绘图、SVG绘图、地理定位、拖放API、Web Worker、Web Storage和WebSocket等。例如，Canvas提供了一种在网页上动态绘制图形的方式，而Web Storage提供了...
gostack-挑战-reactjs-基础知识
02-13
在本课程“gostack-挑战-reactjs-基础知识”中，我们将深入学习ReactJS这一流行的JavaScript库，用于构建用户界面。React由Facebook开发并维护，它以其组件化、虚拟DOM和单向数据流等特性而闻名。在这个挑战中，我们...
Html基础知识点.docx
07-23
Html 基础知识点 Html 是一种标记语言，用于创建网页的结构和内容。以下是 Html 基础知识点： 一、Html5 文档类型和字符集 * Html5 文档类型：<!doctype html> * Html5 字符集：<meta charset="UTF-8"> 二、...
HTML5 高级之canvas 绘制图形
maoye的博客
10-06 5854
canvas是HTML5中新增的标签，像所有dom一样，拥有自己的属性、方法、和事件，其中就有绘图的方法，js能够调用它在网页上完成绘图。 canvas也是HTML5中最强大的特性之一，允许开发者使用动态和交互式方法在web上实现桌面应用程序的功能   canvas元素会在网页上创建一个空白区域，然后通过API操作这个区域，与空白的div元素相似，用途完全不同     语法：&lt;c...
html正方形项目符号,html自定义项目符号
weixin_30010773的博客
06-02 1385
html自定义项目符号: 关于项目符号的介绍，缺失：html自定义符号3674/9项目符号：放在文本(如列表中的项目)前以添加强调效果的点或其他符号，即在各项目前所标注的符号。在大文档中可建立或取消项目编号。Exce中创建方法项目符号是放在文本(多为列表中的项目)前以添加强调效果的点或其他符号。在Word文档中可以轻松建立或取消项目符号，如果要在Excel单元格内添加项目符号，该如何操作呢？方法一...
html项目符号正方形,css如何添加列表项目符号
weixin_30806145的博客
05-31 1208
css如何添加列表项目符号一般默认情况下列表项目符号是有的。如果是定义了 ul{list-style:none;} ,那个项目符号就没有了，在这种情况下，可以用 list-style-type把那个项目符号显示出来，其中 list-style-type 的取值可以是下面这些：disc : 默认值。实心圆circle : 空心圆square : 实心方块decimal : 阿拉伯数字lower-ro...
html5绘制实心正方形,JavaScript+html5 canvas制作色彩斑斓的正方形效果
weixin_32133403的博客
05-30 378
本文实例讲述了JavaScript+html5 canvas制作色彩斑斓的正方形效果。分享给大家供大家参考，具体如下：运行效果截图如下：index.html：canvas中的透明度#canvas {background:black; margin-top:100px; margin-left:200px;}cache = {};var offsetX = 50,offsetY = 20;cache...
浅谈windows.onload()与$(document).ready()
weixin_30955617的博客
03-09 133
浏览器加载完DOM后，会通过javascript为DOM元素添加事件，在javascript中，通常使用window.onload()方法。 在jquery中，则使用$(document).ready()方法。下面介绍一下两者的区别。 window.onload() $(document).ready() 执行时机 在页面所有元素（包括图片，引用文件）加载...
两种方法实现在HTML页面加载完毕后运行某个js：
06-26 456
Js方法： <script type=”text/javascript”> window.onload=function (){ var userName=”xiaoming”; alert(userName); } </script> ...
外部js失效的解决的方法
qq_45064049的博客
06-05 4455
外部js失效的解决的方法1. 外部js失效的原因:2. 解决方案一:在body的后面引入外部js3. 解决方案二:将所有的js代码放到window.οnlοad=function(){}里面 1. 外部js失效的原因: 最主要的原因就是我们忽略了一个html代码的执行的顺序,从上到下,从左到右. 平常我们引入一个外部的js代码,通常会把它放到head的最后面.这样就会导致,代码从上到下执行的时候,...
HTML5文件多媒体播放
zhangbin18607544869的博客
09-28 2265
一)HTML5页面中的多媒体 在HTML5中新增了两个新的元素--video元素和audio元素。 video元素专门用来播放网络上的视频或电影 audio元素专门用来播放网络上的音频数据。 这两个元素的使用方法也是非常简单的，只要把播放音频的url指定的该元素的src就可以了。如下： &lt;video src="http://xxxx.mp3"&gt;你的浏览不支持video属性&l...
HTML5入门：从基础知识到高级特性
"HTML5入门教程，适合新手学习，讲解HTML5基础知识及发展历程，包括HTML5中的Video、Audio标签和Canvas的使用" HTML5是Web开发领域的重要里程碑，它在1991年的HTML基础上，逐步加入了更多的功能和优化，旨在提升...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值