Jscript动画系列(1)-----用JS在Canvas上画一个小球

最新推荐文章于 2022-12-19 18:03:09 发布

Jsenna

最新推荐文章于 2022-12-19 18:03:09 发布

阅读量567

点赞数 1

分类专栏： Html5+Canvas+JS动画文章标签： JavaSrcipt 动画 Html5 Canvas 小球(圆)

本文链接：https://blog.csdn.net/Jsenna/article/details/82912933

版权

Html5+Canvas+JS动画专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近在学习JS动画，有一些心的同大家分享！由于前期内容比较少，样式什么的就写在Html文件里了！

欢迎，萌新提问，大神评论

首先(Index.html)

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>this is one Ball</title>
	</head>
	<body>
		<canvas id="canvas" width="400" height="400"style="background-color:#000></canvas>
		<script src="Ball.js"></script>
		<script>
			window.onload=function(){
				//Our code here...
			};
		</script>
	</body>
</html>

上面的这段Html代码就相当于一个模板，后面基本不会有太大的变化，主要的内容在<srcipt>标签里。

接下来我们会单独建一个JS文件，这个文件主要是一个球类，这个类拥有这个球的一些属性比如半径，颜色，位置(x,y)等，还有一些方法。

文件名（Ball.js）

//定义一个小球类Ball
function Ball (radius,color){
	if(radius === undefined){radius=40;}
	if(color === undefined){color="#ff0000";}
	this.x=0;//x轴坐标
	this.y=0;//y轴坐标
	this.radius=radius;//半径
	this.vx = 0;//速度x轴
	this.vy = 0;//速度y轴
	this.rotation=0;//旋转角度
	this.color=color;//颜色;
	this.lineWidth=1;//边线宽度
}
//小球的绘制方法
Ball.prototype.draw=function(context){
	context.save();//先保存一下当前画布状态
	context.translate(this.x,this.y); //将坐标原点设置为(x,y)，默认
	context.rotate(this.rotation); //旋转当前绘图
	context.lineWidth=this.lineWidth; //画笔粗细
	context.fillStyle=this.color;  //圆圈内填充的颜色
	context.beginPath();  //开始一条绘画路径
	context.arc(0,0,this.radius,0,(Math.PI*2),true); //画一个圆
	context.closePath();  //结束当前路径
	context.fill();  //开始填充
	//若有边框
	if(this.lineWidth>0){
		context.stroke(); //绘制边框
	}
	context.restore();//将绘图状态置为保存值。
};

说明：

注释只是简略的说明作用，想深入了解请自行百度。
Ball.js文件可单独保存要用时使用<script src="Ball.js"></script> 引用即可
现在只是一个最简单的圆，后面还会添加一些其他的属性和方法，比如（速度属性，密度属性，发光效果）等。

现在开始写<script>里面的内容

window.onload=function(){
	var canvas = document.getElementById('canvas');
		context = canvas.getContext('2d');
	var ball=new Ball();  //创建一个Ball
        ball.x=canvas.width/2;  //设置其位置（canvas的中央）
        ball.y=canvas.height/2;
	ball.draw(context);  //调用Ball的draw方法
};

这样就很简单的在canvas上画了一个圆；

效果如图

这里是打包资源下载地址 https://download.csdn.net/download/jsenna/10698555

Jsenna

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jscript动画系列(1)-----用JS在Canvas上画一个小球

最近在学习JS动画，有一些心的同大家分享！由于前期内容比较少，样式什么的就写在Html文件里了！欢迎，萌新提问，大神评论首先(Index.html)&lt;!doctype html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;this is one Ball&lt;/tit..
复制链接

扫一扫

专栏目录