當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML5API(5)

發布時間：2025/4/16 HTML 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5API(5) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、SVG

1、svg與canvas的區別

canvas繪制的是位圖，svg繪制的是矢量圖
canvas使用JavaScript繪制，svg使用xml繪制
canvas不能給每個圖形綁定事件，svg可以給每個圖形綁定事件
canvas適合游戲等頻繁操作的應用，svg適合圖標
canvas需要支持H5標準的瀏覽器，svg的兼容到IE6

2、在html中使用svg

<embed引入>
<embed src="circle1.svg" type="image/svg+xml" />
<object>引入
<object data="circle1.svg" type="image/svg+xml"></object>
<iframe>引入
<iframe src="circle1.svg"></iframe>
直接嵌入

3、svg繪制圖形
參考教程 http://www.runoob.com/svg/svg-tutorial.html

二、觸摸屏事件

1、事件類型
touchstart 開始觸摸
touchmove 觸摸移動
touchend 結束觸摸

2、touchEvent對象
touches
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>觸摸屏繪制</title><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><style>html{overflow:hidden;}body{margin:0;}canvas{background:#333;}</style></head><body><canvas id="myCanvas"></canvas><script>(function(){var canvas=document.getElementById("myCanvas");canvas.width=window.innerWidth;canvas.height=window.innerHeight;var ctx=canvas.getContext("2d");canvas.addEventListener("touchstart",touchStartCall,false);canvas.addEventListener("touched",touchEndCall,false);function touchStartCall (event){canvas.addEventListener("touchmove",touchMoveCall,false);var x=event.touches[0].clientX;var y=event.touches[0].clientY;ctx.beginPath();ctx.moveTo(x,y);event.preventDefault();}function touchMoveCall (event){var x=event.touches[0].clientX;var y=event.touches[0].clientY;ctx.lineTo(x,y);ctx.strokeStyle="#fff";ctx.lineWidth=2;ctx.stroke();event.preventDefault();}function touchEndCall(){canvas.removeEventListener("touchmove",touchMoveCall,false);}})()</script></body></html>

3、touchList對象

4、touch對象

clientX
clientY
pageX
pageY
scrollX
scrollY

三、事件類型

鼠標事件

鍵盤事件

文檔事件

圖片事件

表單事件

其他事件

四、H5新增事件類型

1、拖放事件 dragEvent

2、多媒體事件 mediaEvent

3、progress progerssEvent

4、觸摸屏事件 touchEvent

5、window事件

6、Form事件

7、Mouse事件

8、其他事件

轉載于:https://www.cnblogs.com/DCL1314/p/7881041.html

總結

以上是生活随笔為你收集整理的HTML5API(5)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

HTML5API