您的位置：首页 > Web前端 > HTML5

HTML5基本用法1

2012-08-31 13:51 232 查看

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/></head>
<body>


  <div>这是我视频播放器
   <video src="黑马程序员_毕向东_Java基础视频教程第15天-11-集合框架(泛型接口).avi" controls="controls" width="400px" height="300px"></video>
  </div>
  <div>这是我的音乐播放器，其实是一样的
   <video src="bgsound .mp3" controls="controls"></video>
  </div>
  <canvas id="can" width="300px" height="300px" style="border:2px solid red"></canvas>
</body>
<script type="text/javascript">
   var canvas=document.getElementById("can");//拿到画布
   var cxt=canvas.getContext("2d");//可以理解为拿到画笔

   //此圆形是红心实心，黑色边框的圆
   cxt.beginPath();
   cxt.arc(80,250,20,0,360,true);
   cxt.stroke();//根据规则划线，实现空心圆
   //下面的两句是实心圆，并可设置颜色
   cxt.fillStyle="red";//设置颜色，注意顺序是先设置颜色，再填充啊，不设置的话，默认是黑色
   cxt.fill();//填充
   cxt.closePath();

  //画直线
  cxt.beginPath();
  cxt.strokeStyle="green";//设置直线颜色
  cxt.lineWidth="6";//设置直线宽度
  cxt.moveTo(10,10);//设置起始点
  cxt.lineTo(10,150);//设置移动点到
  cxt.stroke();//根据规则划线，实现直线
  cxt.closePath();
  //画直线
  cxt.beginPath();
  cxt.moveTo(10,10);//设置起始点
  cxt.lineTo(20,150);//设置移动点到
  cxt.stroke();//根据规则划线，实现直线
  cxt.closePath();
  //同理可画出任意图形...等等任意不会则图形
  cxt.beginPath();
  cxt.moveTo(50,50);
  cxt.lineTo(100,100);
  cxt.lineTo(50,100);
  cxt.lineTo(100,50);
  cxt.lineTo(50,50);//注意这里要回到原点啊，不然不封口的
  cxt.stroke();
  cxt.closePath();
  //同理可画出正方形填充颜色...等等任意不会则图形
  cxt.beginPath();
  cxt.moveTo(200,50);
  cxt.lineTo(200,100);
  cxt.lineTo(250,100);
  cxt.lineTo(250,50);
  cxt.lineTo(200,50);//注意这里要回到原点啊，不然不封口的
  cxt.fillStyle="blue";//可以填充颜色，不设置的话，默认是黑色
  cxt.fill();//填充
  cxt.closePath();
  //同理可画出三角形...等等任意不会则图形
  cxt.beginPath();
  cxt.moveTo(50,120);
  cxt.lineTo(50,200);
  cxt.lineTo(100,200);
  //cxt.lineTo(50,120);//注意这里要回到原点啊，不然不封口的
  //cxt.stroke();//这里串点的话，要给出原点啊
  cxt.fill();//会继承之前设置过的颜色,填充的话，直接给三个点就可以了
  cxt.closePath();
  //画矩形函数
  cxt.beginPath();
  //             x轴,y轴长宽
  cxt.strokeRect(130,120,50,50);//直接画矩形函数
  cxt.closePath();
  //画填充矩形，注意这里有直接封装好的函数调用即可
  cxt.beginPath();
  cxt.fillStyle="green";//，注意这里颜色也继承啦啊,当然可以自己设定颜色
  cxt.fillRect(200,120,40,40);//直接调用封装好的函数即可
  cxt.closePath();
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 图形浏览器 video border html

相关文章推荐

新的分享

章节导航