HTML5 API(上)-Canvas

作者: 栀子花wish | 来源:发表于2017-03-28 09:49 被阅读0次

<h2>一、Canvas</h2>
Canvas本质上是一个位图画步。

canvas.png
提示：
(1)Canvas的宽和高只能用属性方式声明！若使用样式来声明则无效。
(2)Canvas的本意是“画布/画板”，可以盛放绘制的内容；真正执行绘图任务的是“画笔/绘图上下文对象”——Context
(3)每一个画布，有且只有一个画笔对象：
<pre>var ctx = canvas.getContext( '2d' );</pre>
(4)画笔/绘图上下文对象的成员——小难点：
<pre>

fillStyle:"#000000" 填充颜色
font:"10px sans-serif" 字体
globalAlpha:1 全局透明度
lineCap:"butt" 线的端点样式
lineJoin:"miter" 线的连接处样式
lineWidth:1 线条的宽度
shadowBlur:0 阴影部分模糊距离
shadowColor:"rgba(0, 0, 0, 0)" 阴影部分颜色
shadowOffsetX:0 阴影水平偏移量
shadowOffsetY:0 阴影竖直偏移量
strokeStyle:"#000000" 轮廓/描边颜色

arc:arc() 绘制一个弧线
beginPath:beginPath() 开始绘制路径
clearRect:clearRect() 清除一个矩形范围
clip:clip() 裁切
closePath:closePath() 闭合一条路径
createLinearGradient:createLinearGradient() 创建一个线性渐变色
createRadialGradient:createRadialGradient() 创建一个径向渐变色
drawImage:drawImage() 绘制一幅图像
ellipse:ellipse() 绘制一个椭圆
fill:fill() 填充一条路径
fillRect:fillRect() 填充一个矩形区域
fillText:fillText() 填充一段文本
lineTo:lineTo() 绘制一条直线
measureText:measureText() 测量一段文本，得到宽度
moveTo:moveTo() 移动画笔到指定点
rect:rect() 绘制一个矩形路径
rotate:rotate() 旋转
scale:scale() 缩放
stroke:stroke() 对一条路径描边
strokeRect:strokeRect() 对一个矩形进行描边
strokeText:strokeText() 对一段文本进行描边
translate:translate() 进行位移
</pre>

QQ截图20170328092438.png

(1)绘制矩形(长方形)——矩形以自己的左上角作定位点
(2)绘制文本——文字以自己的坐下角作定位点

html结构：
<pre>
<canvas id="diagonal" style="1px solid" width:"200" height:"200"></canvas>
</pre>
JavaScript代码：
<pre>
function drawDiagonal(){
//取的canvas元素及其绘图上下文
var canvas=document.getElementById("diagonal");
var context=canvas.getContext('2d');
//用绝对坐标来创建一条路径
context.beginPath();
context.moveTo(70,140);
context.lineTo(140,70);
//将这条线绘制到canvas上
context.stroke();
}
window.addEventListener('load',drawDiagonal(),true);
</pre>
练习：绘制一个左右来回移动的矩形
经典的碰撞反弹效果
<pre>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5新特性——Canvas绘图技术</title>
<style>
canvas {
background: #efefef;
}
</style>
</head>
<body>
<canvas id="c1" width="500" height="400">
您的浏览器不支持Canvas标签！
</canvas>

//练习：绘制一个左右来回移动的矩形
//经典的碰撞反弹效果

var x = 0;
var y = 0;
var xDirection = 1; //1表正向 -1表负向
setInterval(function(){
//清除已有内容
ctx.clearRect(0,0, 500,400);
ctx.fillRect(x,y, 50,40);
x += 5*xDirection;

if(x>=500-50){
  xDirection = -1;
}else if(x<=0){
  xDirection = 1;
}

}, 42);

</script>
</body>
</html>
</pre>
对于web API可以不用记住：可以查询Mozilla开发者网络API：https://developer.mozilla.org/
<h5>①第一步：Web API & DOM</h5>

QQ截图20170327181617.png

<h5>②第二步：Web API接口一览表</h5>

QQ截图20170328085704.png

<h5>③第三步：找到Canvas API</h5>

QQ截图20170328090333.png

<h5>④第四步：绘制矩形、文本，线型、文本样式、填充和描边样式、渐变和图案、图像等</h5>
<h2>二、Audio和Video</h2>
HTML5中的多媒体支持<video></video>、<audio></audio>
<pre>
<audio id="clickSound">
<source src="a.ogg">
<source src="b.mp3">
</audio>
<button id="toggle" onclick="toggleSound()">play</button>
</pre>

<pre>function toggleSound() {
var music = document.getElementById('clickSound');
var toggle = document.getElementById('toggle');
if(music.paused){
music.play();
toggle.innerHTML = 'Pause';
}else{
music.pause();
toggle.innerHTML = 'Play';
}
}</pre>
<video>标签可用的属性：
(1) src：待播放的资源的URL
(2) width：播放区域的宽度
(3) height：播放区域的高度
(4) controls：是否显示播放控件，默认不显示 false
(5) autoplay：是否自动播放，默认不自动播放 false
(6) loop：是否循环播放，默认不循环 false
(7) preload：如何预加载视频，可以赋值为
“none”：不预加载
“metadata”：只预加载元数据，如影片宽、高、大小、时长
“auto”：（默认值）自动预加载元数据以及部分影片数据
(8) poster：影片播放之前显示的“电影海报”
<pre>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>演示：video对象成员的使用</title>
<style>
.container {
text-align: center;
position: relative;
border: 1px solid #aaa;
}
.mask {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0, .5);
}
.mask img {
margin-top: 200px;
cursor: pointer;
border: 1px solid #aaa;
border-radius: 50%;
background: rgba(255,255,255,0.2);
}
</style>
</head>
<body>

<div class="container">
<video id="player" src="resource/birds.mp4" >
您的浏览器不支持VIDEO标签
</video>

QQ截图20170328095727.png

</div>
</pre>
<pre>
<script>
//当点击“播放|暂停”按钮时，开始播放/暂停影片
playOrPause.onclick = function(){
if(player.paused === true){ //当前处于暂停状态
player.play(); //播放影片
playOrPause.src = 'resource/pause.png';
}else { //当前处于播放状态
player.pause();
playOrPause.src = 'resource/play.png';
}
}

//当影片暂停时，遮罩层中显示一个广告
player.onpause = function(){
ad.style.display = 'inline-block';
}
//当影片播放时，去除遮罩层中的广告
player.onplay = function(){
ad.style.display = 'none';
}
</script>
</pre>
<h2>三、Geolocation</h2>
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
浏览器获得地理定位数据的原理：
手机： GPS、基站、IP反向解析
PC： IP反向解析
①使用 getCurrentPosition() 方法来获得用户的位置。
简单的地理定位实例，可返回用户位置的经度和纬度。

<pre>
<!DOCTYPE html>
<html>
<body>
<p id="demo">点击这个按钮，获得您的坐标：</p>
<button onclick="getLocation()">试一下</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
</pre>
例子解释：

检测是否支持地理定位
如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
showPosition() 函数获得并显示经度和纬度

上面的例子是一个非常基础的地理定位脚本，不含错误处理。
②处理错误和拒绝
getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数：
<pre>
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
</pre>
错误代码：

Permission denied - 用户不允许地理定位
Position unavailable - 无法获取当前位置
Timeout - 操作超时

<h6>getCurrentPosition() 方法 - 返回数据</h6>
若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。

QQ截图20170328104949.png

Geolocation 对象 - 其他有趣的方法

watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。

clearWatch() - 停止 watchPosition() 方法

下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例（比如 iPhone）：
实例
<pre>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script></pre>
<h6>百度地图</h6>
官网：http://lbsyun.baidu.com/
使用步骤：
(1)注册新用户，或者使用QQ、微博、微信账号登陆
https://passport.baidu.com/v2/?reg&regType=1&tpl=mn&u=http://lbsyun.baidu.com/