HTML5基本用法1_cxt.fillstyle是黑色-CSDN博客

本文链接：https://blog.csdn.net/wjw_java_android/article/details/7928926

<!DOCTYPE html><!--告诉浏览器这是html5页面，注意要用支持html5的浏览器啊-->
<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>