canvas 学习笔记01

来源：互联网发布：吴天心知乎编辑：程序博客网时间：2024/06/05 00:30

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://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实际上指向是一个对象，多个实例指向一个原型，实现共享。

1 0