html5基础

最新推荐文章于 2024-08-23 09:47:36 发布

西门催学不吹雪ㅤ

最新推荐文章于 2024-08-23 09:47:36 发布

阅读量191

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/u011966169/article/details/106326429

版权

1. Canvas

创建画布

JavaScript绘制图像

var c = $('#xxx');

var ctx = c.getContext('2d');

路径

ctx.moveTo(0,0);

ctx.lineTo(100,100);

ctx.stroke();

圆

ctx.beginPath();

ctx.arc(50,50,50,0.2*Math.PI,0.5*Math.PI);

ctx.stroke();//画线

ctx.fill();//填充

文本

ctx.font='30px Arial';

ctx.fillText('xxx', 0, 30);//实心文字

ctx.strokeText('xxx', 0, 30);//空心文字

渐变

var grd = ctx.createLinearGradient(10,10,150,80);//创建(0,0)到(200,0)的线条渐变

grd.addColorStop(0, 'red');

grd.addColorStop(0.5, 'white');

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

var grd = ctx.createRadialGradient(200, 200, 400, 200, 200, 5); //创建圆(200,200,400)到圆(200,200,5)的圆渐变

图像

img = $('#xxx');

img.yyy=function(x,y){

ctx.drawImage(img, x, y);

}

img.yyy(10, 0);

2. (SVG) Scalable Vector Graphics

3. MathML

指数

矩阵

4. 拖放

  <!DOCTYPE HTML>

    <html>

        <head>

            <meta charset="utf-8"> 

            <title></title>

            <style type="text/css">

                #div1, #div2 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}

            </style>

            <script>

                function allowDrop(ev){

                    ev.preventDefault();

                }



                function drag(ev){

                    ev.dataTransfer.setData("Text",ev.target.id);

                }



                function drop(ev){

                    ev.preventDefault();

                    var data=ev.dataTransfer.getData("Text");

                    ev.target.appendChild(document.getElementById(data));

                }

            </script>

        </head>

        <body>

            <p>拖动图片到矩形框中:</p>

            <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

            <br>

            <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">

                <img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

            </div>

        </body>

        </html>

5. 视频

play() pause() width

6. 音频

7. input新类型

datetime

datetime-local

month

tel

time

url

week

8. 表单属性

autocomplete

novalidate

autofocus

input与表单相关的属性

form

当type='submit'/'image'时

formaction

formenctype

formmethod

formnovalidate

formtarget

9. 语义元素

10. Web存储

localStorage永久保存数据。

sessionStorage关闭浏览器后删除数据。

使用方法：

localStorage.xxx='yyy';

localStorage.setItem(key, value);

localStorage.getItem(key);

localStorage.removeItem(key);

localStorage.clear();

localStorage.key(index);

11. Web SQL

openDatabase

transaction

executeSql

12. Web缓存

manifest

13.Web Workers

检测浏览器是否支持Web Worker

if(typeof(Worker) !== 'undefined')

demo.js

postMessage(i);

w = new Worker('demo.js');

w.onmessage=function(event){

event.data //传递的数据

}

w.terminate();

14.Web SSE (Server-Sent Event)

检测浏览器是否支持SSE：

if(typeof(EventSource)!=='undefined')

var source = new EventSource(url);

source.onmessage=function(event){

event.data //传递的数据

}

服务端：

把请求报头'Content-Type'设置为'text/event-stream'

规定不对页面进行缓存

输出发送日期（始终以'data:'开头）

向网页刷新输出数据

onopen 当通往服务器的连接被打开

onmessage 当接收到消息

onerror 当发生错误

西门催学不吹雪ㅤ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
html5基础

1. Canvas 创建画布 <canvas></canvas> JavaScript绘制图像 var c = $('#xxx'); var ctx = c.getContext('2d'); 路径 ctx.moveTo(0,0); ctx.lineTo(100,100); ctx.stroke(); 圆 ctx.beg...
复制链接

扫一扫