点击上方蓝字关注我们

前端新特性学习说明：

对于Java后端程序员来说，前端的要求并不是很高，做到能看懂，了解，查得到即可！当然了面临如今这个卷卷的社会发展，我们的全面发展与综合实力的提升肯定是没错的。本文仅简单挑了部分H5&CSS3的新特征略说一试，更多详情请面向百度扩展！

一、HTML5新特性

1.Canvas画布

1）简介

HTML5 的canvas 标签用于绘制图像（通过脚本，通常是 JavaScript）。canvas元素本身并没有绘制能力，它仅仅是图像的容器，我们都是通过脚本来完成实际的绘图任务。

2）创建画布并绘制内容

<!--canvas：定义一个画布，在网页中是一个矩形框，默认没有边框和内容边框通过样式自己添加；canvas元素本身没有绘图能力，内容通过脚本绘制。--><canvas id="myCanvas" style="width: 300px; height: 200px; border: 1px solidred;"></canvas><script>  function printRect(){    //1、获取一个画布    var myCanvas=document.getElementById("myCanvas");    /* 2、创建context对象,     *getContext("2d") 对象是内建的 HTML5 对象，     *拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。     */       var ctx=myCanvas.getContext("2d");      //3、在画布上绘制一个红色矩形      ctx.fillStyle="red";//设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle默认设置是#000000（黑色）。      ctx.fillRect(0,0,200,100);//fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。  }      printRect();</script>

3）Canvas 坐标

canvas 是一个二维网格。canvas 的左上角坐标为 (0,0)。

4）Canvas路径

<script> function printLine(){  var myCanvas=document.getElementById("myCanvas");  var ctx=myCanvas.getContext("2d");  ctx.moveTo(0,0);//定义线条开始坐标  ctx.lineTo(200,100);//定义线条结束坐标  ctx.stroke();//该方法来绘制线条  ctx.moveTo(200,100);  ctx.lineTo(100,200);  ctx.stroke(); } printLine();</script>

5）绘制图片

<img src="img/cat.jpg" id="mycat" /><canvas id="myCanvas" style="width: 300px; height: 200px; border: 1px solidred;"></canvas><script> function printImg(){  var img=document.getElementById("mycat");  var myCanvas=document.getElementById("myCanvas");  var ctx=myCanvas.getContext("2d");  img.onload = function() {   ctx.drawImage(img,0,0);  } } printImg();</script>

6）Canvas参考手册

此处为语雀内容卡片，点击链接查看：https://www.yuque.com/jimoworld/qd/owmnr5

2.SVG图片

1）介绍

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

SVG 用于定义用于网络的基于矢量的图形

SVG 使用 XML 格式定义图形

SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

SVG 是万维网联盟的标准

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改

SVG 图像可被搜索、索引、脚本化或压缩

SVG 是可伸缩的

SVG 图像可在任何的分辨率下被高质量地打印

SVG 可在图像质量不下降的情况下被放大

2）应用

svg的width属性和height属性，指定了 SVG 图像在 HTML 元素中所占据的宽度和高度。如果不指定这两个属性，SVG 图像默认大小是300像素（宽） x 150像素（高）。

circle标签代表圆形，其中cx、cy、r属性分别为横坐标、纵坐标和半径，单位为像素。坐标都是相对于画布的左上角原点。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">   <circle id="mycircle" cx="50" cy="50" r="50" /></svg>

3）SVG参考手册

此处为语雀内容卡片，点击链接查看：https://www.yuque.com/jimoworld/qd/ygi661

3.地理定位

1）简介

HTML5 Geolocation（地理定位）用于定位用户的位置。

PS: Geolocation（地理定位）对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。

2）获取用户位置的经度和纬度

<p id="position"></p><button onclick="getLocation()">点我获取当前坐标</button><script>  <!--这段代码在PC端的浏览器测试不容易成功-->var x = document.getElementById("position");function getLocation() {if(navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPosition);} else {x.innerHTML = "该浏览器不支持获取地理位置。";}}function showPosition(position) {x.innerHTML = "纬度: " + position.coords.latitude +"<br>经度: " + position.coords.longitude;}</script> <!--上边的在PC端的浏览器测试不容易成功，提供一个使用百度地图API获取位置的参考代码,通过百度API获取位置成功率更高。见下边--><p id="position"></p><button onclick="getLocation()">点我获取当前坐标</button><script src="https://api.map.baidu.com/api?v=2.0&ak=nbayQz8caAKuy60pk9otBOxZecZE8Wc8"></script><!--<script src="http://api.map.baidu.com/getscript?v=2.0&ak=nbayQz8caAKuy60pk9otBOxZecZE8Wc8"></script>--><script type="text/javascript">var position = document.getElementById('position');function getLocation() {// 创建百度地理位置实例，代替 navigator.geolocationvar geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function(e) {if(this.getStatus() == BMAP_STATUS_SUCCESS){// 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是coords.latitudevar lat=e.point.lat;var lng=e.point.lng;position.innerHTML = '经度：' + lng + '<br/>纬度：' + lat;} else {position.innerHTML = 'failed' + this.getStatus();}});}</script>

4.拖放API

拖放（Drag 和 drop）是 HTML5 标准的组成部分。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。（详解见参考资料）

<!DOCTYPE html><html><head><meta charset="utf-8"><title>拖放API</title><style type="text/css">#div1,#div2 {float: left;width: 300px;height: 135px;margin: 10px;padding: 10px;border: 1px solid #aaaaaa;}</style><script>  function allowDrop(event) {     event.preventDefault();  }  functio   n drag(event) {     event.dataTransfer.setData("Text", event.target.id);  }  function drop(event) {     event.preventDefault();     var data = event.dataTransfer.getData("Text");     event.target.appendChild(document.getElementById(data));  }</script></head><body><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag1" src="img/cat.jpg" draggable="true" title="拖动我试试" ondragstart="drag(event)" width="100%" height="100%"></div><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></body></html>