java知识总结-16

Posted 2020-09-28

html5 中的一些新特性：
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

新元素：
<canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。Canvas的坐标是从左上角开始的，而且向下是Y的正方向，向右是X的正方向
（画布 用于创建图像）
---------------------
****绘制图形步骤
1.定义一个画布
<canvas id="myCanvas" width="200" height="100"></canvas>
注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.
2.找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
3.创建 context 对象：
var ctx=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
4.绘制图形
下面的两行代码绘制一个红色的矩形：
ctx.fillRect(0,0,150,75);
设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式
画线
ctx.moveTo(0,0);//定义开始坐标
ctx.lineTo(200,100);//定义结束坐标
ctx.stroke();//开始画线
画圆
ctx.beginPath();//
ctx.arc(95,50,40,0,2*Math.PI，false/true); //圆心开始坐标（x/y） 圆的半径 开始的弧度 结束的弧度 False = 顺时针，true = 逆时针(可选)
ctx.stroke();
绘制文本
ctx.font="30px Arial";//选择高度 字体
ctx.fillText("Hello World",10,50);// 内容 开始坐标
----------------------
填充方式：
ctx.fillStyle="#FF0000"; //颜色填充
---------------
渐变：
// 创建渐变（线性渐变）
var grd=ctx.createLinearGradient(0,0,200,0); //渐变开始坐标（x/y） 渐变结束坐标（x/y）----在填充区域的坐标
grd.addColorStop(0,"red"); //开始颜色 第一个参数可以是小数 （0~1） 用于确定不同位置
grd.addColorStop(1,"white"); //结束颜色
***********
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80); //渐变填充区域坐标
**************
// 创建渐变（圆形渐变）
var grd=ctx.createRadialGradient(75,50,5,90,60,100); //内圆心坐标（x/y） 渐变开始半径 外圆心坐标（x/y） 渐变结束半径
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
***********cxt.strokeStyle=grd; 把渐变添加到对应元素上
---------------
图片放到画布上
var img=document.getElementById("scream");
ctx.drawImage(img,10,10); //图片
*****
获得画布上的坐标
*******
旋转画布
cxt.rotate(45*Math.PI/180); //旋转的是画布的坐标系而不是图形本身

 

元素的拖放
为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true">
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
setData() //设置值
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
当放置被拖数据时，会发生 drop 事件。

 

视频播放
<video width="320" height="240" controls>
? <source src="movie.mp4" type="video/mp4">
? <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
---<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

 

音频：
<audio controls>
? <source src="horse.ogg" type="audio/ogg">
? <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
****原则同视频

输入：
color 从拾色器中选择一个颜色: <input type="color" name="favcolor">
data 定义一个时间控制器: 生日: <input type="date" name="bday">
datatime 定义一个日期和时间控制器（本地时间）: 生日 (日期和时间): <input type="datetime" name="bdaytime"> <!doctype> 声明必须位于 HTML5 文档中的第一行
datetime-local 定义一个日期和时间 (无时区): 生日 (日期和时间): <input type="datetime-local" name="bdaytime">
email 在提交表单时，会自动验证 email 域的值是否合法有效: E-mail: <input type="email" name="email">
month 定义月与年 (无时区): 生日 (月和年): <input type="month" name="bdaymonth">
number 定义一个数值输入域(限定): 数量 ( 1 到 5 之间，默认是5，步长为2 ): <input type="number" name="quantity" min="1" max="5" value="5" step="2">
range 定义一个不需要非常精确的数值（类似于滑块控制）: <input type="range" name="points" min="1" max="10">
search 定义一个搜索字段 (类似站点搜索或者Google搜索): Search Google: <input type="search" name="googlesearch">
tel 定义输入电话号码字段: 电话号码: <input type="tel" name="usrtel">
url 定义输入URL字段: 添加您的主页: <input type="url" name="homepage">

 

表单元素：
<keygen> 元素的作用是提供一种验证用户的可靠方法。
<keygen>标签规定用于表单的密钥对生成器字段。
当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
-----------------
<datalist> <input>标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen> ><keygen> 标签规定用于表单的密钥对生成器字段。
<output> <output> 标签定义不同类型的输出，比如脚本的输出。

 

 

HTML5 的改进
新元素
新属性
完全支持 CSS3
Video 和 Audio
2D/3D 制图
本地存储
本地 SQL 数据
Web 应用

 

画扇形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.beginPath();
ctx.moveTo(400, 300); //设置开始点
ctx.arc(400,300,260,0*Math.PI,2.0*Math.PI);
ctx.fillStyle="#aaaaaa"; //设置填充色
ctx.fill(); //填充
ctx.closePath(); //回到开始点
ctx.stroke();
------实现画图并填充扇形