音频播放
点击试试：
其中controls="controls"表示添加标准的控件，该标准控件依赖于浏览器
<audio src="img/老街旧友故事和酒.mp3" controls="controls">音频播放失败</audio>
属性补充
自动播放（部分浏览器不支持，测试谷歌浏览器不支持，360浏览器可用）
autoplay="autoplay"
在音频结束后自动重新播放
1 <audio autoplay="autoplay" loop="loop"> 2 <source src="img/do.mp3" /> 3 </audio>
自定义播放/暂停按钮：
1 <p>播放歌曲》》》</p> 2 <audio src="img/老街旧友故事和酒.mp3">音频播放失败</audio> 3 <button onClick="display()">播放/暂停</button> 4 <script> 5 var audioobj=document.getElementsByTagName("audio")[0]; 6 function display(){ 7 //判断音乐是否是暂停 8 if(audioobj.paused) audioobj.play(); 9 else audioobj.pause(); 10 } 11 </script>
视频播放
1 <p>播放视频》》》</p> 2 <video controls="controls" width="500px" height="300px" > 3 <source src="img/vivi.mov" /> 4 <source src="img/do.mp4" /> 5 视频播放失败 6 </video>
属性补充
音频属性均有，所以不在赘述
1 document.body.innerHTML="<canvas id="canid" width="1000px" height="1900px"></canvas> " 2 var canobjx=document.getElementById("canid"); 3 resto=canobjx.getContext("2d"); 4 resto.fillStyle="#FF00FF";//设置颜色 5 //resto.rotate(1);//旋转，参数（角度） 6 resto.translate(300,100);//移动 7 resto.scale(2,1);//缩放 8 resto.fillRect(0,100,200,300);//填充矩形，参数（左上坐标，宽高）
静音播放，部分浏览器实现自动播放需添加静音
muted="muted"
设置播放前显示的图片
poster="https://img2018.cnblogs.com/blog/....png"
绘制相关
绘制形状
1 document.body.innerHTML="<canvas id="canid" width="1000px" height="1900px"></canvas> " 2 var canobjx=document.getElementById("canid"); 3 resto=canobjx.getContext("2d"); 4 resto.fillStyle="#FF00FF";//设置颜色 5 //resto.rotate(1);//旋转，参数（角度） 6 resto.translate(300,100);//移动 7 resto.scale(2,1);//缩放 8 resto.fillRect(0,100,200,300);//填充矩形，参数（左上坐标，宽高）
绘制图片
1 document.body.innerHTML="<canvas id="canid" width="1000px" height="1900px"></canvas> " 2 var canobjx=document.getElementById("canid"); 3 resto=canobjx.getContext("2d"); 4 var imgx=new Image(); 5 imgx.src="img/0.jpg"; 6 imgx.onload=function(){ 7 resto.drawImage(imgx,100,200);//参数（图片对象，x,y) 8 }