html5学习笔记——基础
一:Canvas
<canvas> 标签只是图形容器,图形的绘制需要用JS来定义。
1:绘制与填充
stroke():绘制,空心。
fillXX():填充,实心。
2:绘制线条
var c=document.getElementById("myCanvas"); //获取画布
var ctx=c.getContext("2d"); //创建上下文
ctx.moveTo(0,0); //移动画笔到起点
ctx.lineTo(200,100);//准备画线到终点
ctx.stroke(); //绘制
3:画圆
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);//定义圆形
ctx.stroke();//绘制
4:绘制文本
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);//实心文本
ctx.strokeText("Hello World",10,50);//空心文本
5:绘制渐变颜色
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d"); var grd=ctx.createLinearGradient(0,0,200,0); //创建线性渐变区域
grd.addColorStop(0,"red"); //起始颜色
grd.addColorStop(1,"white");//渐变颜色 ctx.fillStyle=grd;//用渐变色作为画布颜色
ctx.fillRect(10,10,150,80); //绘制矩形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d"); // 创建椭圆渐变色区域
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white"); ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
6:绘制图片
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");//获取img
ctx.drawImage(img,10,10);//绘制图片
二:SVG
可伸缩矢量图:SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失。
H5可使用SVG标签,在其中通过图形标签来“定义”矢量图:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">//外层:svg标签,使用xml来描述图形
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">//图形描述标签
</svg>
三:拖放
H5中,可以使元素为可拖放的,从而实现在网页上手动拖放改变元素位置的效果。
1:设置元素为可拖放
<img draggable="true">
2:定义拖动开始的响应属性ondragstart以及属性值对应的事件函数:
<img id="" src="" draggable="true"
ondragstart="drag(event)" width="" height="">
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);//设置拖动数据:类型、元素id
}
3:定义接纳拖动元素的容器,通过ondragover定义拖动结束响应属性,通过ondrop定义放开鼠标响应属性:
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
function allowDrop(ev)
{
ev.preventDefault();//默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
四:定位
HTML5 Geolocation API 用于获得用户的地理位置,不过有精度误差。在有GPS的移动设备上使用会更精确一些。
1:获取当前位置
<script>
var x=document.getElementById(result");
function getLocation()
{
if (navigator.geolocation) //检查是否支持定位
{
navigator.geolocation.getCurrentPosition(showPosition,showError);//通过api获取当前位置,如果获取成功则调用参数1,获取失败则调用参数2
}
else{x.innerHTML="该浏览器不支持获取地理位置。";}
} //获取定位成功的回调参数
function showPosition(position)//参数就是位置对象
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
} //获取定位失败的回调参数
function showError(error)//参数是错误码
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="用户拒绝对获取地理位置的请求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML="请求用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知错误。"
break;
}
}
</script>
2:将定位结果调用谷歌地图或百度地图,生成定位图片
function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude; var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";//调用谷歌地位api,将位置生成图片 document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";//把定位图片设置到img
}
3:使用脚本来显示带有标记、缩放和拖曳选项的交互式地图
function showPosition(position)
{
lat=position.coords.latitude;
lon=position.coords.longitude;
latlon=new google.maps.LatLng(lat, lon)//创建谷歌地图位置
mapholder=document.getElementById('mapholder')
mapholder.style.height='250px';
mapholder.style.width='500px'; var myOptions={//定义谷歌地图选项
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
};
var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);//创建地图
var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});//创建标记
}
4:getCurrentPosition() 方法返回值所包含的属性:
属性 | 描述 |
---|---|
coords.latitude | 十进制数的纬度 |
coords.longitude | 十进制数的经度 |
coords.accuracy | 位置精度 |
coords.altitude | 海拔,海平面以上以米计 |
coords.altitudeAccuracy | 位置的海拔精度 |
coords.heading | 方向,从正北开始以度计 |
coords.speed | 速度,以米/每秒计 |
timestamp | 响应的日期/时间 |
5:实时更新位置方法
watchPosition() - 返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS),会一直监视。除非在其他地方调用了clearWatch()
clearWatch() - 停止 watchPosition() 方法。
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);//监控实时位置,并把监控结果调用showPosition来呈现
}
else{x.innerHTML="该浏览器不支持获取地理位置。";}
}
function showPosition(position)//此处可以替换为在地图绘制当前位置的逻辑
{
x.innerHTML="纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
</script>
html5学习笔记——基础的更多相关文章
- HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- Python学习笔记基础篇——总览
Python初识与简介[开篇] Python学习笔记——基础篇[第一周]——变量与赋值.用户交互.条件判断.循环控制.数据类型.文本操作 Python学习笔记——基础篇[第二周]——解释器.字符串.列 ...
- 数论算法 剩余系相关 学习笔记 (基础回顾,(ex)CRT,(ex)lucas,(ex)BSGS,原根与指标入门,高次剩余,Miller_Rabin+Pollard_Rho)
注:转载本文须标明出处. 原文链接https://www.cnblogs.com/zhouzhendong/p/Number-theory.html 数论算法 剩余系相关 学习笔记 (基础回顾,(ex ...
- 《python基础教程(第二版)》学习笔记 基础部分(第1章)
<python基础教程(第二版)>学习笔记 基础部分(第1章)python常用的IDE:Windows: IDLE(gui), Eclipse+PyDev; Python(command ...
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3秘笈第三版涵盖HTML5学习笔记6~8章
第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...
- CSS3秘笈第三版涵盖HTML5学习笔记1~5章
第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...
随机推荐
- day22 模块最后的补充。包。
前一天内容复习: # def func(): # a # # def main(): # func() # # try: # main() # except: # pass # raise NameE ...
- Nginx的配置安装和使用
http://blog.csdn.net/e421083458/article/details/30086413 以后继续更新
- Python编程基础[条件语句if 循环语句 for,while](二)
ython条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块. 可以通过下图来简单了解条件语句的执行过程: if 判断条件: 执行语句……else: 执行语句…… x= ...
- python基础篇_002_基础数据类型
Python基础数据类型 1.int # int 用于计算 num = 3 # int 与其他数据类型转换 int_to_str = str(num) # 数字加引号 print(int_to_str ...
- 20165220Java实验四 Android程序设计
一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:葛宇豪 学号:20165220 指导教师:娄嘉鹏 实验日期:2018年5月14日 实验时间:13:45 - 15:25 实验序号:实验 ...
- DDoS攻击与防御(2)
2.攻击系统资源终端设备在与服务器进行通信时,经常需要创建会话连接,在此过程中通常会使用TCP和SSL等协议.会话连接一旦被占满,新进入的会话请求就必须等待前面的会话完成.消耗系统资源的DDoS攻击的 ...
- [译]the cost of javascript in 2018(1)
前言 为了构建交互性网站,我们需要发送js给我们的用户,但很多情况下,我们使用了太多js. 在移动端,经常看到只加载了个点击链接或者滚动不了的情况. 实话说,js仍然是移动端最昂贵的资源,因为其在很大 ...
- input模拟输入下拉框
功能点: 输入.下拉选择.根据输入内容模糊检索.键盘上下键选择 实现思路: 显示隐藏: input获取焦点显示,失去焦点隐藏 下拉选择: 以父元素为基准,通过绝对定位定位至input输入下方 模 ...
- HTTP STATUS CODE: 521的解决办法
https://blog.csdn.net/wangdepei/article/details/84798601
- PHP学习笔记 ThinkPHP
//检测文件是否存在 if(!file_exists(dirname(__FILE__)."/Bo/Admin/Conf/config.php")) { header('Locat ...