您现在的位置：首页 >> 前端 >> 内容

canvas学习笔记01

时间：2017/1/5 9:29:00 点击：

　　核心提示：一直对界面比较感兴趣，前段时间学习了html和js，学的很潦草。今天是第一天学canvas，很兴奋，上代码!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Tran...

一直对界面比较感兴趣，前段时间学习了html和js，学的很潦草。

今天是第一天学canvas，很兴奋，上代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">  
<head>  
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
  <title>Document</title>  
  <style type="text/css">  
      canvas{  
          border:1px solid red;  
      }  
  </style>  
</head>  
<body>  
    <!-- height和width要在标签内部设置 -->  
  <canvas id="cav" height="500" width="500">浏览器不支持</canvas>  
  <script type="text/javascript">  
      var cav = document.getElementById("cav");  
      ctx = cav.getContext("2d");  
      //小球类  
      function Ball(x,y,radio,color){  
          this.x = x;  
          this.y = y;  
          this.radio = radio;  
          ctx.beginPath();  
          ctx.arc(x, y, radio, 0 , Math.PI * 2, true);  
          ctx.fillStyle = color;  
          ctx.fill();  
      }  
      Ball.prototype = {  
          update : function(x,y,radio,color){  
              ctx.clearRect(this.x-this.x/2, this.y-this.y/2, this.x, this.y);  
              this.x = x;  
              this.y = y;  
              this.radio = radio;  
              ctx.beginPath();  
              ctx.arc(x, y, radio, 0 , Math.PI * 2, true);  
              ctx.fillStyle = color;  
              ctx.fill();  
  
  
          }  
      }  
      ball = new Ball(100,100,50,"blue");  
      var x = 100;  
      setInterval(function(){  
          ball.update(x++,x++,50,"blue");  
      }, 20)  
  </script>  
</body>  
</html>

实现小球的轨迹控制。

关于原型的理解：

把属性方法直接写在function{}内部，叫实例属性或者方法，各个实例之间不能共享，连方法也不能共享。

prototype实际上指向是一个对象，多个实例指向一个原型，实现共享。