HTML5学习笔记（三）

最新推荐文章于 2022-11-20 22:30:18 发布

君鹏不姓贾

最新推荐文章于 2022-11-20 22:30:18 发布

阅读量387

点赞数

分类专栏：我的学习记录

本文链接：https://blog.csdn.net/junpengbuxingjia/article/details/40212139

版权

我的学习记录专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML5音频（续）

之前使用audio元素时，播放音乐时会出现时间轴和控制界面，如果不想被这些影响显示的效果，而只保留一个最简单的开始和暂停功能。这时就可以创建一个隐藏的audio元素，不使用controls特性，用自己做的控制界面控制音频的播放。代码如下所示：

<!DOCTYPEHTML>

<html>

<title>

Audio cue

</title>

<sourcesrc="johann_sebastian_bach_air.ogg">

<sourcesrc="johann_sebastian_bach_air.mp3">

</audio>

Play

</button>

<scripttype="text/javascript">

function toggleSound()

{

varmusic=document.getElementById("clickSound");

vartoggle=document.getElementById("toggle");

if(music.paused)

{

music.play();

toggle.innerHTML="Pause";

}

else

{

music.pause();

toggle.innerHTML="Play";

}

</script>

</html>

<audio>到</audio>与之前应用的没有区别，只是不使用controls特性。不同的是我们创建了一个具有切换功能的按键，以脚本的方式控制音频的播放即下面这段代码。

<buttonid="toggle" οnclick="toggleSound()">

Play

</button>

其中说明了每当点击按钮时都会触发toggleSound（）函数，在这个函数中用if作了简单的判断，实现当音乐是暂停时开始播放，音乐播放时暂停，同时相应的改变按键名称。效果如下图

HTML5 Canvas

一、什么是Canvas

在网页上使用canvas元素时，它会创建一块矩形区域。默认情况下大小为300×150。Canvas本质上是一个位图画布，其上绘制的图形是不可缩放的。Canvas绘制出来的对象不属于页面DOM结构或者任何命名空间。

二、Canvas坐标

Canvas的坐标是从左上角开始的，x轴沿着水平方向向右延伸，y轴沿垂直方向向下延伸。原点位于左上角。

关于Canvas坐标的问题，我在论坛上利用自己学的相关知识回复了一位网友的相关问题，回答的过程也是我对自己所学的总结。

问题是：

<!DOCTYPE HTML>

<html>

<head>

<scriptlanguage="javascript">

function drawTop(ctx,fillStyle){

ctx.fillStyle = fillStyle;

ctx.beginPath();

ctx.arc(0, 0, 30, 0,Math.PI,true);

ctx.closePath();

ctx.fill();

}

function draw(){

var ctx =document.getElementById('myCanvas').getContext("2d");

// 注意：所有的移动都是基于这一上下文。

ctx.translate(80,80);

for (var i=1;i<10;i++){

ctx.translate(60*i, 0);

drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)");

}

window.οnlοad=function(){

draw();

}

</script>

</head>

<body>

<canvasid="myCanvas" width="700"height="300"></canvas>

</body>

</html>

这段代码中屏蔽了save和restore，最中的结果并不是预期的结果，由此我更加深刻的理解了Canvas坐标的计算和作用。记录如下。

因为ctx是一个全局对象，ctx.save()的时候保存了ctx当前的状态值，然后你执行了一些值的修改，比如改变阴影大小，在函数最后调用ctx.restore()方法将ctx之前的状态值还原回去。

当注释掉save和restore后，这时调用draw函数时ctx的画笔状态就不会保存与还原。程序中的只是画图的全过程啊，画笔状态还有其他很多信息，虽然每次都是完成了一个图形的绘制，但是每次画笔的其他属性也都会变化了。

对比两种情况的图就会发现图是错位了。画第一个半圆的时候两者是一样的，但是当你执行完一次ctx.arc(0, 0, 30, 0,Math.PI,true);之后ctx的位置就会根据(x + radius*cos( startAngle), y + radius*sin( startAngle))这个公式变化，具体到这个例子就是每次向右移动30，然后你在循环中因为没有把ctx的状态还原在此基础上又移动了60*i的距离，画第二个半圆时传入起点位置自然就不和第一个园相邻了，图像就错位了。

举个例子来说循环是从i=1开始的，下面分别列出有无save——restore的情况，

有save——restore

i=1

执行save保存起点（0,0）

执行ctx.translate（），起点变为（60*i，0）即（60,0）

执行drawTop（）：起点偏移到(x + radius*cos( startAngle), y + radius*sin( startAngle))即（90,0）

执行restroe起点回到（0,0）

i=2

执行save保存起点（0,0）

执行ctx.translate（），起点变为（60*i，0）即（120,0）

执行drawTop（）：起点偏移到(x + radius*cos( startAngle), y + radius*sin( startAngle))即（150,0）

执行restroe起点回到（0,0）