前端 HTML 5

最新推荐文章于 2024-04-07 08:41:16 发布
最新推荐文章于 2024-04-07 08:41:16 发布
阅读量310 收藏
点赞数
分类专栏： 前端 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxnth/article/details/103588045
版权

HTML 5 API

1.HTML 5 拖放

1.源对象和目标对象

**源对象：**指的是我们鼠标点击的一个事物，这里可以是一张图片，一个div，或者一段文本等。
**目标对象：**指的是我们拖动源对象后移动到一块区域，源对象可以进入这个区域，可以在这个区域悬停（未松手），可以松手释放将源对象放置此处（已松手），也可以悬停后离开该区域。

2.拖放相关API

除了源对象和目标对象以外，在拖动的过程中还可以抽象出一个过程对象。
源对象：
dragstart：源对象开始拖放
drag：源对象拖放过程中。（鼠标可能在移动也可能未移动）
dragend：源对象拖放结束
过程对象：
dragenter：源对象开始进入过程对象范围内
dragover：源对象在过程对象范围内移动
dragleave：源对象离开过程对象的范围
目标对象：
drop：源对象被拖放到目标对象内
拖动示咧：

<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    
<style>        
#drag {            
width: 100px;            
height: 100px;            
background-color: red;            
position: absolute;            
left: 0;            
top: 0;        
}    
</style> 
</head>
<body>    
<div id="drag" draggable="true"></div>    
<script>        
drag.ondragstart = function (event) {            
// 第一步 阻止目标对象的默认行为           
document.ondragover = function (e) {               
 e.preventDefault();            
 }           
  // 第二步 设置目标对象的drop事件       
  document.ondrop = function (e) {                
  drag.style.left = e.clientX - event.offsetX + 'px';                drag.style.top = e.clientY - event.offsetY + 'px';           
   }       
    }    
    </script> 
    </body>

div#drag为我们的源对象，document既为过程对象，又为目标对象。
要实现对源对象的拖动，首先需要将源对象的draggable属性设置为true。
默认地，无法将数据或者元素放置到其它元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这就需要通过调用ondragover事件的event.preventDefault()方法。
最后，为目标对象设置ondrop事件，改变源对象的left和top值即可

3.dataTransfer对象

在所有拖放事件中，提供一个数据传递对象dataTransfer，用于在源对象和目标对象之间传递数据。 setData() 方法：向dataTransfer对象中存入数据。接收2个参数，第1个表示要存入数据种类的字符串，现在支持以下几种：
text/plain：文本文字
text/html：HTML文字
text/xml：XML 文字
text/uri-list：URL列表，每个URL为一行。
第2个参数为要存入的数据。例入：

event.dataTransfer.setData('text/plain','Hello World');

getData() 方法：从dataTransfer 对象中读取数据。参数为在 setData() 方法中指定的数据种类。例如：

 event.dataTransfer.getData('text/plain');

clearData() 方法：清除dataTransfer 对象中存放的数据。参数可选，为数据种类。若参数为空，则清空所有种类的数据。例如：

 event.dataTransfer.clearData();

setDragImage() 方法：通过img元素来设置拖放图标。接收3个参数，第1个为图标元素，第2个为图标元素离鼠标指针的x轴位移量，第3个为图标元素离鼠标指针的y轴位移量。
例如：

 let source = document.getElementById('source'),    
 icon = document.createElement('img');
icon.src = 'img.png';
source.addEventListener('dragstart',function(ev){    ev.dataTransfer.setDragImage(icon,-10,-10) 
},false)

**e?ectAllowed 和dropE?ect 属性：**这2个属性结合起来设置拖放的视觉效果。
注：IE不支持dataTransfer 对象
例：

<head>    
<meta charset="UTF-8">    
<title>Document</title>    
<style>        
div {            
width: 200px;            
height: 200px;            
border: 3px solid;            
float: left;            
margin-right: 20px;        
}    
</style> 
</head>
<body>    
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">        <img src="./1.jpg" draggable="true" ondragstart="drag(event)" id="dr ag1">    
</div>    
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>    <script>        
let drag = function (e) {            
e.dataTransfer.setData("Text", e.target.id);        
}        
let allowDrop = function (e) {            
e.preventDefault();        
}        
let drop = function (e) {           
 e.preventDefault();            
 let data = e.dataTransfer.getData("Text");            e.target.appendChild(document.getElementById(data));       
  }    
  </script> 
 </body>

2.多媒体

1、引入多媒体
<body>    
<audio src="./test.mp3" controls>        
你的浏览器不支持audio  标签  
</audio> 
</body>

2个属性：
**src:**多媒体文件路径
**controls：**显示控制面板
为了做到浏览器兼容，我们可以将多媒体文件的路径写在多个标签里面

 <body>    
 <audio controls>        
 <source src="./test.mp3">        
 <source src="./test.ogg">        
 你的浏览器不支持audio  标签  
 </audio> 
 </body>

要插入视频，只需要将标签换成标签即可

2、相关属性和方法

muted属性：用来设置当前媒体是否开静音，如果设置为true代表开启静音，false为不开启

 <body>    
 <audio controls muted>        
 <source src="./test.mp3">        
 <source src="./test.ogg">        
 你的浏览器不支持audio  标签   
 </audio> 
 </body>

autobuffer属性：设置为true后将实现自动缓冲

<body>    
<audio controls autobuffer>        
<source src="./test.mp3">        
<source src="./test.ogg">        
 你的浏览器不支持audio  标签 
</audio> 
</body>

autoplay属性：设置为自动播放，现在的浏览器也只允许在静默模式下才能自动播放

 <body>    
 <audio controls autoplay>        
 <source src="./test.mp3">        
 <source src="./test.ogg">        
  你的浏览器不支持audio  标签 
 </audio> 
 </body>

loop属性：设置后将会重复播放

 <body>    
 <audio controls loop=true>        
 <source src="./test.mp3">        
 <source src="./test.ogg">        
  你的浏览器不支持audio  标签   
 </audio> 
 </body>

poster属性：设置视频的封面，没有播放时可以显示一张图片

 <body>    
 <video controls poster="./1.jpg">        
 <source src="./test.mp4">        
 <source src="./test.ogv">        
 <source src="./test.swf">        
  你的浏览器不支持video 标签   
 </video> 
 </body>

获取多媒体对象
使用DOM的方法来获取多媒体对象

 const video = document.getElementsByTagName("video")[0];

video.muted = true; // 设置为静音
video.loop = true; // 设置循环播放

volune属性：用于设置音量：

 video.volume = 0.9;

currentTime属性：用于获取多媒体当前所播放的具体时间

 video.currentTime += 10; // 视频播放快进10秒

playbackRate属性：该属性用于设置快进或者快退速度的数字值。值为1时表示以正常速度播放

 video.playbackRate = 8; // 以8倍速度快进

duration属性：用于查看该多媒体的持续时间，也就是时长为多久

 video.duration

音频和视频也有很多可以触发的事件：
play 事件：用于开始播放多媒体
pause事件：用于暂停多媒体
volumechange事件：用于调整多媒体的音量
loademetadata事件：在多媒体的所有元素数据被加载时会触发该事件

3 Web Storage

1、Cookie 存储机制的优缺点

优点：1、简单易用 2、浏览器负责发送数据 3、浏览器自动管理不同站点的Cookie
**缺点：**1、Cookie中存储的数据容量有限，其上限为4KB
2、存储Cookie的数量有限，多数浏览器的上限为30或50个
3、如果浏览器的安全配置为最高级别，那么Cookie则会失效
4、Cookie不适合大量数据的存储，因为Cookie会由每个对服务器的请求来传递，从而造成Cookie速度缓慢效率低下

2、为什么要用Web Storage

localStorage:
localStorage是一种没有时间限制的数据存储方式，可以将数据保存在客户端的硬盘或其他存储器，存储的时间可以是一天，两天，几周或几年

sessionStorage：
sessionStorage指的是针对一个session的数据存储，即将数据保存在session对象中
Web Storage存储机制比传统的Cookie更加强大：
1、Web Storage 提供了易于使用的API接口，只需要设置键值对即可使用
2、在存储方面可以根据用户分配的磁盘配额进行存储
3、提供了使用Java Script 编程的接口

3、使用Web Storage

可以使用setItem()方法来存储一个值，然后通过getItem()方法来获取值
1、在html里面设置localStorage的值

 <body>    
 <script>        
 localStorage.setItem("name", "xiejie");        
 console.log(" 信息以保存!");  
 </script> 
 </body>

2、获取值

 <body>    
 <script>        
 let name = localStorage.getItem("name");        
 console.log(`姓名为${name}`); // 姓名为xiejie    
 </script> 
 </body>

直接进行存值和取值操作：

 <body>    
 <script>        
 localStorage.setItem("name", "xiejie");        
 localStorage.age = 18;        
 console.log(" 信息以保存!");   
 </script> 
 </body>

如果对应的值不是一个字符串，也会自动的被转换为字符串类型：

 <body>    
 <script>        
 localStorage.stu = ['xiejie', 'yajing', 'xizhi'];        
 console.log(" 信息以保存!");   
 </script> 
 </body>

如果要删除本地存储中的一个条目，可以使用removeItem()方法或者直接使用delete运算符

 localStorage.removeItem("name"); 
 // 或者
 delete localStorage.name

如果要彻底删除本地存储中所有的东西，可以使用clear()方法

 localStorage.clear()

4、storage事件

每次将一个值存储到本地存储时，就会触发一个storage事件

key:告诉我们被修改的条目的键。
newValue:告诉我们被修改后的新值。
oldValue:告诉我们被修改前的值
storageArea:告诉我们是本地存储还是会话存储
url:被改变的键的文档地址

4 绘制简单图形

Canvas 主要应用的领域

1、游戏
2、可视化数据（数据图标化）
3、Banner广告
4、未来（模拟器，远程计算机控制，图形编辑器）

1、添加Canvas 元素

就是书写一对标签

<body>    
<canvas width="400" height="300" style="border:1px solid"></canvas> </body>

并不是所有的浏览器都支持Canvas

<canvas width="400" height="300" style="border:1px solid">
</canvas>

还有就是利用 JavaScript里面检测getContext属性是否存在

<body>   
//添加canvas元素
 <canvas id="canvas" width="400" height="300" style="border:1px solid">          
 </canvas>    
 <script>        
 // 在JavaScript中获取canvas 元素       
 const canvas = document.getElementById('canvas');        if(canvas.getContext){            
 console.log("支持");        
 }else{           
  console.log("不支持");        
  }    
  </script> 
  </body>
2、如何绘制图像

添加canvas 元素
在JavaScript中获取canvas 元素
获取到上下文，创建context对象，画布上下文是一个包含用于在画布上绘画方法的对象
使用JavaScript来进行绘制

<body>   
//添加canvas元素
   <canvas id="canvas" width="400" height="300" style="border:1px solid">
   </ canvas>    
   <script>        
   const canvas = document.getElementById('canvas'); //在JavaScript中获取Canvas元素       
   const context = canvas.getContext("2d"); //获取上下文，创建 context对象

        //使用JavaScript 来进行绘制    
  context.beginPath(); // 开始路径      
  context.moveTo(10, 10); //移动画笔       
  context.lineTo(100, 100); // 绘画出一条直线    
  context.closePath(); // 闭合路径    
  context.stroke(); // 进行勾勒  
  </script> 
  </body>
3、绘制简单图形
1.绘制直线

用到的方法有3个 ：moveTo() 、lineTo() 、stoke()
moveTo() 方法：相当于将画笔移动到某一个坐标
lineTo()方法：勾勒一条线，但是这只是草稿
stoke()方法：根据勾勒的线描边

<body>    
//添加canvas元素
 <canvas id="canvas" width="400" height="300" style="border:1px solid"></ canvas>    
 <script>        
 const canvas = document.getElementById('canvas'); //在JavaScript中获取Canvas元素       
 const context = canvas.getContext("2d"); //获取上下文，创建 context对象
       context.moveTo(0, 0);       
  context.lineTo(400, 300);        
  context.moveTo(400, 0);        
  context.lineTo(0, 300);        
  context.stroke();    
  </script> 
  </body>
2.绘制矩形
<body>    
//添加canvas元素
    <canvas id="canvas" width="400" height="300" style="border:1px solid">
    </ canvas>    
    <script>        
    const canvas = document.getElementById('canvas'); //在JavaScript中获取Canvas元素       

    const context = canvas.getContext("2d"); //获取上下文，创建 context对象context.moveTo(0, 0);        
    context.lineTo(400, 300);        
    context.moveTo(400, 0);        
    context.lineTo(0, 300);        
    context.strokeStyle = "#ff0000"; //设置勾勒颜色       
    context.stroke();
    </script> 
  </body>
3、绘制图形和弧形

使用arc()方法可以在画布上绘制一个弧形

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bQm1zZc4-1575903630067)(./1554817070130.png)]
要把角度转换为弧度，公式：π/180 * 角度

半圆

<body> 
//添加canvas元素
   <canvas id="canvas" width="400" height="300" style="border:1px solid">
   </ canvas>    
   <script>       
    const canvas = document.getElementById('canvas'); //在JavaScript中获取Canvas元素       
     const context = canvas.getContext("2d"); //获取上下文，创建 context对象      context.arc(200, 150, 50, 0, Math.PI, false);        
     context.stroke();    
     </script> 
     </body>

整圆

<body> 
//添加canvas元素
   <canvas id="canvas" width="400" height="300" style="border:1px solid">
   </ canvas>    
   <script>       
    const canvas = document.getElementById('canvas'); //在JavaScript中获取Canvas元素       
     const context = canvas.getContext("2d"); //获取上下文，创建 context对象      context.arc(200, 150, 50, 0, Math.PI * 2, false);   
     context.stroke();    
     </script> 
     </body>
4.绘制三角形
<body> 
//添加canvas元素     
<canvas id="canvas" width="400" height="300" style="border:1px solid">
</ canvas>    
<script>       
 const canvas = document.getElementById('canvas'); //在JavaScript中获取Canvas元素       
 const context = canvas.getContext("2d"); //获取上下文，创建 context对象       context.moveTo(100, 75);        
 context.lineTo(175, 200);       
  context.lineTo(35, 200);        
  context.fillStyle = "skyblue";        
  context.fill(); // 填充方法会自动闭合路径  
  </script> 
  </body>
5.绘制曲线

二次曲线：

context.quadraticCurveTo(cp1x,cp1y,x,y)

<body> 
   //添加canvas元素
 <canvas id="canvas" width="400" height="300" style="border:1px solid"></ canvas>    
 <script>        
  const canvas = document.getElementById('canvas'); //在JavaScript中获取Canvas元素       
 const context = canvas.getContext("2d"); //获取上下文，创建 context对象    context.strokeStyle = "dark";        
 context.beginPath();        
 context.moveTo(0, 200); // 这是起点位置        
 context.quadraticCurveTo(75, 50, 300, 200); // 第一个点是控制点第二个是终点        context.stroke();        
 // 下面绘制的直线用于表示上面曲线的控制点和控制线，控制点坐标即两直线的交点(75,5 0)        
 context.strokeStyle = "#ff00ff";        
 context.beginPath();        
 context.moveTo(75, 50);        
 context.lineTo(0, 200);        
 context.moveTo(75, 50);        
 context.lineTo(300, 200);        
 context.stroke();    
 </script> 
 </body>

三次曲线：

context.bezierCurveTo(cpl1x,cp2y,cp2x,cp2y,x,y);

<body> 
   //添加canvas元素
 <canvas id="canvas" width="400" height="300" style="border:1px solid"></ canvas>    
 <script>        
  const canvas = document.getElementById('canvas'); //在JavaScript中获取Canvas元素       
 const context = canvas.getContext("2d"); //获取上下文，创建 context对象    context.strokeStyle = "dark";        
 context.beginPath();        
 context.moveTo(0, 200); // 这是起点位置        
 context.quadraticCurveTo(25,50,75, 50, 300, 200); // 第一个点是控制点第二个是终点        context.stroke();        
 // 下面绘制的直线用于表示上面曲线的控制点和控制线，控制点坐标即两直线的交点(75,5 0)        
 context.strokeStyle = "#ff00ff";        
 context.beginPath();        
 context.moveTo(75, 50);        
 context.lineTo(0, 200);        
 context.moveTo(75, 50);        
 context.lineTo(300, 200);        
 context.stroke();    
 </script> 
 </body>
6.清空画布

使用clearRect()方法可以清除某个矩形范围内的图形：
clearRect(x坐标，y坐标，矩形长，矩形宽)

<body> 
   //添加canvas元素
 <canvas id="canvas" width="400" height="300" style="border:1px solid"></ canvas>    
 <script>        
  const canvas = document.getElementById('canvas'); //在JavaScript中获取Canvas元素       
 const context = canvas.getContext("2d"); //获取上下文，创建 context对象 
  const clearTest = function () {            
  context.clearRect(0, 0, 400, 300);        
  }        
  context.moveTo(100, 75);        
  context.lineTo(175, 200);        
  context.lineTo(35, 200);        
  context.fillStyle = "skyblue";        
  context.fill();
   </script> 
   </body>

5 .SVG

优势：
SVG可被非常多的工具读取和修改（比如记事本）
SVG与JPEG和GIF图像比起来，尺寸更小，且可压缩性更强
SVG是可申缩的
SVG图像可在任何的分辨率下被高质量的打印
SVG可在图像质量不下降的情况下被放大
SVG图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG可以与Java技术一起运行
SVG是开放的标准
SVG文件是纯粹的XML
SVG的主要竞争者是Flash
SVG实例
创建一个SVG文件

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%height="100%"version="1.1"xmlns="http://www.w3.org/2000/ svg">    
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="re d"/> 
</svg>

在HTML 中嵌入SVG 图像

<body>    
<p>Lorem ipsum dolor sit amet.</p>    
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">        
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill ="red" />    
</svg>    
<p>Lorem, ipsum dolor sit amet consectetur adipisicing.</p> 
</body>

将img标签的src属性设置为一个SVG文件的路径

<body>    
<p>Lorem ipsum dolor sit amet.</p>    
<img src="./1.svg" alt="">    
<p>Lorem, ipsum dolor sit amet consectetur adipisicing.</p> 
</body>

SVG预定义的形状元素
矩形：rect
圆形：circle
椭圆：ellipse
线：line
折线：polyline
多边形：polygon
路径：path

SVG矩形

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%"height="100%"version="1.1"xmlns="http://www.w3.org/2000/ svg">    
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1; stroke:rgb(0,0,0)"/>    
</svg>

代码说明：
rect元素的width和height属性可定义矩形的高度和宽度
style属性用来定义css属性
css的fill属性定义矩形的填充颜色（rgb值、颜色名或者十六进制值）
css的stroke-width属性定义矩形边框的宽度
css的stroke属性定义矩形边框的颜色

SVG圆形

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/ svg">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="re d"/> 
    </svg>

代码说明：
cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为（0，0）
r属性定义圆的半径

SVG椭圆

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/ svg">    
<ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/> 
</svg>

代码说明：
cx属性定义圆点的x坐标
cy属性定义圆点的y坐标
rx属性定义水平半径
ry属性定义垂直半径

SVG线条

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/ svg">    
<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke -width:2"/> 
</svg>

代码说明：
x1属性在x轴定义线条的开始
y1属性在y轴定义线条的开始
x2属性在x轴定义线条的结束
y2属性在y轴定义线条的结束

SVG折线

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/ svg">    
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;st roke:red;stroke-width:2"/> 
</svg>

代码说明：
points属性定义折线中每个点的x和y坐标

SVG多边形

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/ svg">    
<polygon points="220,100 300,210 170,250" style="fill:#cccccc; stroke:#0 00000;stroke-width:1"/> 
</svg>

SVG路径
标签用来定义路径。
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/ svg">    
<path d="M250 150 L150 350 L350 350 Z" /> 
</svg>

SVG文本
使用 元素来定义文本 

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/ svg">    
<text x="10" y="50" fill="red">I love SVG</text> 
</svg>

SVG滤镜
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDi?useLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feO?set
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

高斯模糊

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/ svg">    
<defs>        
<filter id="Gaussian_Blur">            
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />        
</filter>    
</defs>    
<ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#0 00000;stroke-width:2;filter:url(#Gaussian_Blur)"/> 
</svg>

SVG渐变
渐变是一种颜色到另一种颜色的平滑过渡
线性渐变

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/
svg">    
<defs>        
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">            <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity: 1"/>            <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity: 1"/>        </linearGradient>    
</defs>    
<ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange_red)" /> 
</svg>

径向渐变

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/ svg">    
<defs>        
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy ="50%">
            <stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacit y:0"/>            
            <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity: 1"/>        
            </radialGradient>    
            </defs>    
            <ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue) "/> 
            </svg>
zxnth
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
目标对象，源对象
weixin_30347009的博客
09-10 1473
1、给要拖放的元素添加draggable=truea，img本身具有可拖放性 2、源对象ondragstart：开始被拖放ondrag：拖拽过程中dragend ：拖拽结束 3、目标对象ondragenter：当拖拽元素进入目标文件的时候触发的事件ondragover:当拖拽元素穿过目标元素的时候触发的事件dragleave：鼠标经过该元素离开本元素触发该事件；ondrop：当拖拽元素在目标元...
项目实训——【ES6学习笔记之】Object.assign()
Moments
03-12 150
基本用法 Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。 const target = { a: 1 }; const source1 = { b: 2 }; const source2 = { c: 3 }; Object.assign(target, source1, source2); target // {a:1, b:2, c:3} Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。 注意，如
HTML5--拖拽API(含超经典例子)
最新发布
2401_84091468的博客
04-07 848
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处获取。有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**[外链图片转存中…(img-BI1rtkfD-1712450429824)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！
target和source之间的转换（目标对象和源对象之间的转换）
braincer的博客
06-19 5125
public class Transfer { // 定义两个Class对象 private Class sourceClazz; private Class targetClazz; public Transfer() { Type[] c = ((ParameterizedType) getClass().getGenericSuperclass()).getActu
对象方法（包含es6）
m0_57479235的博客
04-24 1127
1.Object.assign(target,source1,source2,...) 方法主要用于对象的合并，将源对象source的所有可枚举属性合并到目标对象target上,此方法只拷贝源对象的自身属性，不拷贝继承的属性。（从后向前覆盖） Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。同名属性会替换。 Object.assign只能进行值的复制，如果要复制的值是一个取值函数，那么将求值后再复制。 Objec
nsqd启动加载历史数据LoadMetadata
辛明辉的专栏
07-16 376
func (n *NSQD) LoadMetadata() error { atomic.StoreInt32(&n.isLoading, 1)//函数开始 原子写入n.isLoading为1 defer atomic.StoreInt32(&n.isLoading, 0)//函数退出时 原子写入 n.isLoading为0 fn := newMetadataFile(n.getOpts())//从n的opt里面拿出data-path 历史数据的文件目录地址 data, err
前端html5可视化大屏，共28个
06-22
前端html5可视化大屏，共28个
前端Html5商城模板
03-31
前端Html5商城模板
web前端HTML5学习笔记
09-07
前端笔记HTML5部分
（免费）前端HTML5+CSS3思维导图大全
03-11
小白入手前端可以看HTML5+CSS3的参考，加入了个人的理解和总结。
Java对象拷贝,源对象source到目标对象target
落地
09-21 3053
import org.springframework.beans.BeansException; import org.springframework.beans.FatalBeanException; import org.springframework.util.Assert; import org.springframework.util.ClassUtils; import java...
数据对象和数据源（OLE）
书山有路勤为径，学海无涯苦作舟
07-10 1941
    当你执行数据传递时，不管是使用粘贴板还是使用拖放，数据都有源和目标。一个应用程序 提供为复制数据并另外一个程序接受他的粘贴。数据传输的每边都需要在相同的数据上执行 不同的操作。微软基本类库（MFC）提供两个类来表达数据传诵的每边：1 数据源（实现为COleDataSource对象）表示数据传输的源。他们在数据被复制到粘贴板或 数据通过拖放提供时被源应用程序创建。 数据对象（实现为COleD
两个相似对象之间属性赋值BeanUtils.copyProperties(源对象，目标对象)
一点光辉的博客
07-22 1109
两个相似对象之间属性赋值，使用BeanUtils.copyProperties(源对象，目标对象) 比如person对象属性都有值，personVo对象很多字段是和person相似，便面使用大量get/set赋值，就是用 BeanUtils.copyProperties(源对象，目标对象) ...
es6之object.asign(目标对象,源对象)
代码青春
05-27 444
//Object.assign()方法的第一个参数是目标对象(数据最终转移的对象)，后面的参数都是源对象 const target = { a: 1 }; const source01 = { b: 2 }; const three = { c: 3 }; Object.assign(target, source01, th.
java源对象对比替换目标对象
qq_25578447的博客
12-27 495
/** * 复制对象属性（对象类型必须相同） * * @param orig 资源对象 * @param dest 目标对象 * @param clazz 源对象类 * @param ignoreNull 是否忽略空（true:忽略，false：不忽略） * @return */ public static T copyProperties(T source, T target, Class&amp;amp;amp;l...
html图片不能拖动,关于html5图片拖动的代码的问题？
weixin_39529914的博客
06-05 391
不负相思意一、关于拖拽API拖拽API是HTML5的新特性，相对于其他新特性来说，重要程度占到6成，实际开发中使用比例占到3成，学习要求个人认为是达到掌握即可的程度。二、什么是拖拽和释放？拖拽：Drag释放：Drop拖拽指的是鼠标点击源对象后一直移动对象不松手，一但松手即释放了三、什么是源对象和目标对象？源对象：指的是我们鼠标点击的一个事物，这里可以是一张图片，一个DIV，一段文本等等。目标对象：...
canvas-画布
weixin_44486539的博客
12-02 2489
HTML5 的 canvas 元素用于定义画布，是一个矩形区域，默认颜色为白色，默认大小为 300 * 150；通过 JavaScript 可以在该区域上绘制图像 ，开发人员可以控制其每一个像素；canvas 拥有多种绘制：路径、矩形、圆形、字符以及添加图像的方法。 **注意**：如果要设置画布的大小不能通过 CSS 样式进行设置，只能通过元素的 `width` 、`height` 属性进行设置，否则会出现问题。
前端html5css3笔记整理下载
07-24
前端HTML5和CSS3是网页开发中常用的技术，对于想要学习或者加深自己的前端开发能力的人来说，整理和下载相应的笔记是非常必要的。 HTML5是一种用于构建网页结构的标记语言，它引入了许多新的元素和属性，使得网页...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值