canvas动画

最新推荐文章于 2020-06-29 14:02:45 发布
最新推荐文章于 2020-06-29 14:02:45 发布
阅读量98 收藏
点赞数
分类专栏： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/laxexue/article/details/84063295
版权

setInterval(
    function(){//函数表示每一帧干什么
        render(); 
        update();
    },50//时间每隔多长时间 毫秒
);

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<canvas id="canvas" style="display: block;margin: 50px auto;">
		
	</canvas>
				
</body>
</html>

<script type="text/javascript">
		var ball = {x:512,y:100,r:20,g:2,vx:-4,vy:0,color:'#005588'};
		window.onload=function(){
			var canvas = document.getElementById('canvas');

			var context = canvas.getContext('2d');

			canvas.width = 1024;
			canvas.height = 768;

			setInterval(
				function(){//函数表示每一帧干什么
					render(context);
					update();
				},50//时间每隔多长时间
			);

		}
		function update(){
			ball.x += ball.vx;
			ball.y += ball.vy;
			ball.vy += ball.g;
			if(ball.y>=768-ball.r){
				ball.y = 768-ball.r;
				ball.vy = -ball.vy*0.8;
			}
		}
		function render(cxt){
			cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height);

			cxt.fillStyle = ball.color;

			cxt.beginPath();

			cxt.arc (ball.x,ball.y,ball.r,0,2*Math.PI);
			cxt.closePath();
			cxt.fill();
		}
	</script>

 

laxexue
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
构建canvas动画框架
03-02
最近一直在做canvas动画效果，发现canvas这个东西做动画不是不可以。相对于flash，它太底层。如果有给力的编辑器或者给力的框架的话，它就能发挥出更大的威力。于是决定自己写一个简单一点的动画框架，以便能更方便...
用canvas轻松上手做动画
Hemx的博客
08-01 1435
绘制图片 绘制图片有三种方法，分别是不同的参数对img对象进行绘制操作 drawImage() 三个参数drawImage(img,x,y) img 图片对象、canvas对象、video对象 x,y 图片绘制的左上角 五个参数drawImage(img,x,y,w,h) img 图片对象、canvas对象、video对象 x,y 图片绘制的左上角 w,h 图片绘制尺寸设置(图片缩放，不是截取) 九个参数drawImage(img,x,y,w,h,x1,y1,w1,h1) img 图片对象
7款超华丽的HTML5 Canvas文字动画特效
tthappyer的博客
11-08 5002
文字是网页中最为常见的元素之一，当然我们使用最多的就是调整文字的颜色、大小等基本属性。有时候我们在一些活动页面上需要展示特别样式的文字效果，这时候我们就可以利用HTML5或者CSS3结合的方式来渲染文字的动画特效。本文就总结了7款超华丽的HTML5 Canvas文字动画特效，可以让你的页面更加的活灵活现，充满梦幻的色彩。1、HTML5 Canvas幻彩火焰文字特效之前我们分享过很多基于HTML5 ...
canvas动画制作
kun_moon的博客
09-09 712
绘制图片 drawImage() 三个参数drawImage(img,x,y) img 图片对象、canvas对象、video对象 x,y 图片绘制的左上角 五个参数drawImage(img,x,y,w,h) img 图片对象、canvas对象、video对象 x,y 图片绘制的左上角 w,h 图片绘制尺寸设置(图片缩放，不是截取) 九个参数drawImage(img,x,y,w...
使用canvas实现简单动画
chjunjun的博客
04-16 9559
大多数 Canvas 绘图 API 都没有定义在 &lt;canvas&gt; 元素本身上，而是定义在通过画布的 getContext()获得的一个“绘图环境”对象上。实现如下星星的运动&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/titl
canvas动画demo
09-24
`canvas`是Web开发中的一个强大工具，它允许开发者动态绘制图形，包括动画效果，为网页添加丰富的视觉体验。 一、canvas基础 HTML5的`canvas`元素是一个矩形区域，可以用于在网页上绘制2D图形。通过JavaScript，...
基于HTML5 Canvas动画实现霓虹雨
06-06
这个"基于HTML5 Canvas动画实现霓虹雨"的主题涉及到利用Canvas API创建动态、视觉效果丰富的霓虹灯光效果，模拟雨滴下落的过程。在这个项目中，我们将深入探讨如何使用HTML5 Canvas和JavaScript来构建这样的动画。 ...
h5 canvas 动画
06-01
在这个“h5 canvas 动画”项目中，我们主要关注的是使用Canvas来实现一个圆形渐变进度条加载动画特效。下面将详细阐述相关知识点。 1. **HTML5 Canvas基本概念** - HTML5 Canvas是一个基于矢量图形的画布，通过...
Canvas动画
天空之外
07-23 4010
1：Canvas动画原理 快速切换的静态画面。 2：基本步骤 绘制 - 清空 - 绘制 - 清空 - 绘制 … 3：控制函数 setTimeout setInterval requestAnimationFrame 4：四种运动 线性运动 const canvas = document.getElementById('canvas'); /* 获得 2d 上下文对象...
Canvas特效动画
越陌度阡
06-28 6479
给大家分享一个用Canvas绘图写成的动画特效，动画的效果如下： 以下是代码实现： <!DOCTYPE html> <html> <head> <title>Canvas特效动画</title> <style> canvas { background: #......
详解Canvas动画部分
热门推荐
Army-海军的博客
06-29 2万+
本文包括缩放，平移，旋转、动画等复杂动画
制作一个简单的canvas动画
王先帅的博客
10-10 8490
教你制作一个简单的canvas动画 作者：旺仔     一上来先话不多说上代码，代码能看的懂得，ok，就当我下面所有的内容为废话，代码看的不太懂的，没关系我会一点一点让你懂，不过前提是你有一定的html+css+js知识，没有这方面的知识又想学前端的话，私我，我有很多教程。如果大神们看到我的文档里有什么错误的地方还请在评论区指点一二，ok，转入正题，（流水账记录开始，大家都是理科生，文笔很烂，
canvas绘制直线
laxexue的博客
11-28 9678
1、绘制一条直线 context.moveTo(100,100); context.lineTo(700,700); 2、绘制一个箭头 →       closePath()要在stroke()前面 context.lineWidth = 15; context.beginPath(); context.moveTo(100,200); context.lineTo(500,20...
canvas 的文字渲染基础
laxexue的博客
12-13 865
文字渲染基础  context.font = "bold 40px Arial";粗体 字号 字体 context.fillText(string,x,y,[maxlen]);字符 起始坐标 context.strokeText(string,x,y,[maxlen]); font 默认值 20px sans-serif  context.font = font-style font-veria...
canvas 的曲线绘制
laxexue的博客
12-05 451
arc(x,y,r,startingAngle,endingAngle,anticlockwise = false); context.move(x0,y0);开始点         arcTo(x1,y1, 控制点         x2,y2,       结束点         radius) 二次贝塞尔曲线 contex.moveTo(x0,y0);//起始点 contet.qua...
canvas 的变换矩阵
laxexue的博客
11-28 364
transform(a,b,c,d,e,f); 默认transform(1,0,0,1,0,0);没有任何改变 每次的操作会产生叠加的效果 setTransform() 忽略之前的操作
canvas 星空
laxexue的博客
11-28 310
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id="canvas" style="border: 1px solid #aaa;display: block;margin:
canvas弧线与圆
laxexue的博客
11-13 275
绘制一条弧线 context.arc(     centerx,centery,radius,     startingAngle,endingAngle,     anticlockwise = false//顺时针默认 true逆时针 ) &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/titl...
canvas动画分层
最新发布
10-12
在Canvas中实现动画分层，可以通过多个图层来完成。每个图层可以独立地绘制和更新，并按照特定的顺序叠加在一起。这样可以实现更复杂的动画效果。 要实现动画分层，可以使用以下步骤： 1. 创建多个Canvas元素：根据需要的图层数量，创建相应数量的Canvas元素。可以使用HTML的canvas标签创建Canvas元素，并设置它们的宽度和高度。 2. 设置Canvas元素的位置和样式：使用CSS来设置每个Canvas元素的位置和样式。可以使用绝对定位或其他方法将它们正确地叠加在一起，并覆盖在同一个位置上。 3. 绘制每个图层：为每个Canvas元素创建一个对应的上下文对象（context），并使用该上下文对象绘制对应的图层内容。可以使用绘图API（如绘制矩形、绘制路径等）和图像等方法来绘制所需的内容。 4. 更新图层和动画：使用定时器或requestAnimationFrame等机制来更新每个图层的状态和动画效果。通过更新图层内容并重新绘制，可以实现动画效果。 5. 叠加图层：将每个Canvas元素按照需要的顺序叠加在一起。可以使用CSS的z-index属性来控制它们的叠加顺序。 示例代码如下： ```html <!DOCTYPE html> <html> <head> <style> #canvas1, #canvas2 { position: absolute; top: 0; left: 0; } </style> </head> <body> <canvas id="canvas1" width="500" height="500"></canvas> <canvas id="canvas2" width="500" height="500"></canvas> <script> // 获取Canvas元素和上下文对象 var canvas1 = document.getElementById("canvas1"); var ctx1 = canvas1.getContext("2d"); var canvas2 = document.getElementById("canvas2"); var ctx2 = canvas2.getContext("2d"); // 绘制第一个图层 function drawLayer1() { ctx1.clearRect(0, 0, canvas1.width, canvas1.height); // 绘制图层内容 ctx1.fillStyle = "red"; ctx1.fillRect(50, 50, 100, 100); } // 绘制第二个图层 function drawLayer2() { ctx2.clearRect(0, 0, canvas2.width, canvas2.height); // 绘制图层内容 ctx2.fillStyle = "blue"; ctx2.beginPath(); ctx2.arc(250, 250, 50, 0, Math.PI * 2); ctx2.fill(); } // 更新动画 function animate() { drawLayer1(); drawLayer2(); // 更新图层状态和动画效果 requestAnimationFrame(animate); } // 启动动画 animate(); </script> </body> </html> ``` 这样，通过创建多个Canvas元素并按照需要绘制和更新每个图层，就可以实现Canvas动画分层效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值