关闭

canvas 学习笔记01

101人阅读 评论(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
查看评论

git学习笔记01

修改commit的信息。 使用git commit --amend这样的命令
  • wzw199101
  • wzw199101
  • 2014-12-29 14:52
  • 220

Canvas学习笔记(一)

本文旨在记录自己学习Canvas中遇到的一些觉得有必要记下来的知识点。一.getContext()方法MDN上的定义: canvas.getContext(contextType, contextAttributes); contextType参数有以下四种: “2d”,创建一个CanvasRen...
  • qq_34491055
  • qq_34491055
  • 2017-06-10 00:41
  • 152

spring boot学习笔记(一)

spring boot的优点配置简单!!!配置简单!!!配置简单!!! 1,可以创建独立的spring应用程序。 2,嵌入tomcat jetty 容器,不需要部署war包。 3,简化maven配置。 4,根据项目依赖自动配置spring框架 5,没有xml配置文件spring boot的...
  • wj1607162253
  • wj1607162253
  • 2017-08-02 19:23
  • 175

canvas画布01

一:canvas 1:概述:   canvas是H5提供的新标签,其最强大的作用是进行2D图形的绘制,canvas标签仅仅作为绘制图形的载体,它本身并不具备绘制图形的能力,我们是通过canvas元素的自身的一个对象进行绘制图形的。目前提供的也有3D功能,但是只有极少数的浏览器支持,一般不用3D。ca...
  • duanlulu825
  • duanlulu825
  • 2017-04-13 21:39
  • 139

[Canvas画图系列]Canvas基本概念_01

一 开始之前虽然大家都称Canvas为html5的新标签,看起来好像Canvas属于html语言的新知识,但其实Canvas画图是通过javascript来做的。所以,如果你想学习Canvas画图,你必须要有Javascript基础。另外,画图嘛,总有一些图像方面的术语和知识点,所以如果你有过做图或...
  • BaiHuaXiu123
  • BaiHuaXiu123
  • 2016-12-11 15:19
  • 2034

HTML5 之 Canvas --- 01、Canvas基础

简介 Canvas,顾名思义就是“画布”。我们可以使用各种绘画函数在“画布”上绘制图像。 Canvas只有两个属性:width 和 height,当然这两个属性也可以使用Css来定义。虽然Canvas元素可以像普通图片一样指定其样式(如:边距,边框,背景等等)。然而这些样式并不会对canva...
  • jiaofeng
  • jiaofeng
  • 2012-07-31 13:31
  • 83

javaScript学习笔记——如何让<canvas>动起来

类似于动画,即一帧一帧的刷新场景 可以使用javaScript中的API function gameloop() {     window.requestAnimFrame(gameloop); } 其他类似的API还有setInterval,setTimeout,但...
  • jiulan1996
  • jiulan1996
  • 2016-05-01 18:41
  • 1116

OSAL操作系统实验学习笔记01

从uCOUS-II 接触操作系统后,了解了操作系统的基本概念和工作流程后开始接触OSAL系统,首先操作系统的工作流程如下图暂时不提这个系统,来分析OSAL系统. 这里提到一个Source Isight的软件,用它来看代码是很方便的,开发环境则用的是IAR for 8051. 第一节实验做OSAL...
  • Mr_White01
  • Mr_White01
  • 2017-03-15 14:11
  • 831

Canvas学习笔记

多媒体老师上课讲了html5中的Canvas元素,自认为学的不是非常的精通,因此,特地去看了慕课网上的视频。所以写点笔记 canvas是html5中的一个标记,因此,可以像其他标记一样,创建标记,一下是在css中创建canvas的画布。 例1 body { ...
  • qq_31214097
  • qq_31214097
  • 2015-10-15 20:05
  • 274

canvas学习笔记

==================canvas学习笔记=================== 1. 默认width=300 height=150 2. 绘图是在2D渲染上下文中进行的,而非canvas元素! 3. 左上角为原点(0,0) 采用的是笛卡尔左边系统,单位是像素 4. cont...
  • wx11408115
  • wx11408115
  • 2016-03-06 22:35
  • 208
    个人资料
    • 访问:469次
    • 积分:56
    • 等级:
    • 排名:千里之外
    • 原创:5篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类
    文章存档
    最新评论