关闭

canvas 学习笔记01

70人阅读 评论(0) 收藏 举报
分类:

一直对界面比较感兴趣,前段时间学习了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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:321次
    • 积分:51
    • 等级:
    • 排名:千里之外
    • 原创:5篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类
    文章存档
    最新评论