canvas 学习笔记01

一直对界面比较感兴趣,前段时间学习了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实际上指向是一个对象,多个实例指向一个原型,实现共享。




阅读更多
个人分类: canvas
下一篇canvas学习笔记02
想对作者说点什么? 我来说一句

Android—BitMap与Canvas学习笔记

2013年04月26日 71KB 下载

linux学习笔记01linux操作基础

2015年11月29日 698KB 下载

没有更多推荐了,返回首页

关闭
关闭