HTML5标签canvas制作动画
摘要:
canvas可以绘制图像,自然而然的就可以制作动画,因为动画的每一帧都是图像。我们可以利用javascript的setInterval函数来实现动画效果。
下面是一个例子,小圆绕着红点圆心不停的转圆圈。
代码:
1 <canvas id="myCanvas" width="300" height="300"> 2 您的浏览器不支持canvas! 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var context = canvas.getContext('2d'); 8 var posX = 100, 9 posY = 150, 10 flag = true; 11 12 setInterval(function() { 13 14 context.fillStyle = "#ccc"; 15 context.fillRect(0,0,canvas.width, canvas.height); 16 context.beginPath(); 17 context.fillStyle = "white"; 18 19 context.arc(posX, posY, 20, 0, Math.PI*2, true); 20 context.closePath(); 21 context.fill(); 22 23 console.log(posX + "," + posY); 24 if(flag && posX < 201) { 25 posX += 1; 26 } else { 27 posX -= 1; 28 flag = false; 29 if(posX < 100) { 30 flag = true; 31 } 32 } 33 if(flag) { 34 posY = 150-Math.sqrt(2500-Math.pow(posX-150, 2)); 35 } else { 36 posY = 150+Math.sqrt(2500-Math.pow(posX-150, 2)); 37 } 38 39 context.beginPath(); 40 context.arc(150, 150, 2, 0, Math.PI*2, true) 41 context.fillStyle = "red"; 42 context.fill(); 43 44 }, 50); 45 } 46 </script>
HTML5标签canvas制作动画相关推荐
- HTML5标签canvas制作平面图
摘要: HTML5规范已经完成了,互联网上已经有数不清的站点使用了HTML5.从现在开始研究HTML5,本文是自己在学习canvas过程中的记录,以备后需. 历史: 这个 HTML 元素是为了客户端矢 ...
- html平面图绘制,HTML5标签canvas制作平面图
摘要: HTML5规范已经完成了,互联网上已经有数不清的站点使用了HTML5.从现在开始研究HTML5,本文是自己在学习canvas过程中的记录,以备后需. 历史: 这个 HTML 元素是为了客户端矢 ...
- php 3d animation,如何用HTML5的Canvas制作3D动画效果
HTML5的诞生给web前端界带来了不小轰动,像什么动画旋转.图片滑块.图片轮播等等这些3D特效,也引发了不少朋友想要学习HTML5的好奇心.最近我一直在做canvas动画效果,发现canvas这个东 ...
- html5在线制作教程,HTML5 Canvas 制作动画
HTML5 Canvas 制作动画 在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果. 在线示例 要在HTML5画布上绘制 ...
- canvas 制作动画(上)
canvas 制作动画(上) canvas 制作动画(上) 1. 画布中的动画 2. 创建动画循环 2.1 循环 2.2 更新.清除.绘制 3. 记忆要绘制的形状 3.1 错误的方法 3.2 正确的方 ...
- canvas 制作动画(下)
canvas 制作动画(下) 1. 改变方向 在 canvas 制作动画(上)已经介绍了如何创建动画,但还没有讨论如何控制形状动画的方式.我觉得只有直线动画会让人觉得很枯燥,不知你是否也这样想. 你已 ...
- 让人脸动起来html源码,分享利用HTML5的Canvas制作人脸的实例代码
这里主要使用了 HTML5 的 Canvas 进行绘制.利用html5制作人脸的实例代码. 先看我们要绘制的人脸效果图: 这里主要使用了 HTML5 的 Canvas 进行绘制. 下面我们开始整个绘制 ...
- HTML5 canvas 制作动画原理
使用HTML5画布能够帮助我们快速实现简单的动画效果,基本原理如下: 每隔一定时间绘制图形并且清除图形,用来模拟出一个动画过程,可以使用context.clearRect(0, 0, x, y)方法来 ...
- html5基于canvas制作酷炫,应用HTML5 Canvas制作酷炫科技背景动画特效
更多特效代码请添加HTML5前端交流群111645711 看这性感的线条,激情的律动! 废话不多说,上代码! 源代码 需要文档版本源码,可以加我的HTML5前端交流群111645711 * { mar ...
- html5的canvas制作口红机闯关游戏(一)
目的 最近实践课让随便做小项目,准备学习下h5的canvas画布功能,参考canvas实现的见缝插针游戏,来制作一个口红机闯关小游戏,学习实践过程问题记录和canvas功能学习整理. 什么是canva ...
最新文章
- java度量页面_JAVA Metrics 度量工具使用介绍1
- ubuntu16.04下配置caffe无GPU
- nginx 和 uWISG 服务器之间如何配合工作的
- 基于.NET Core的优秀开源项目合集
- MIT算法导论(一)——算法分析和引论
- go 跨平台编译linux,golang 跨平台编译
- 容器搭建Hadoop步骤
- java selenium firefox启动报错大调查
- cn.cw.gps.domain.VisitReport.setVisitID([Ljava.lang.String;)]
- 14 递归 匿名函数 内置函数
- python点操作符语法,Python 语法之操作符和表达式
- golang1.1-基础环境的配置以及事项
- Nvidia 的新显卡架构 Maxwell 性能相比开普勒提升了多少?
- php表决器代码,三人表决器:VHDL源代码
- python新闻标题分类_机器学习也会“标题党”?这个算法能根据标题判断新闻类别...
- linux 网桥防火墙,linux透明防火墙(网桥形式).doc
- 在access中记录的末尾标志是什么_access习题--报表和页
- Tensorflow神经网络框架 小例子 三层神经网络 卷积神经网络 循环神经网络 神经网络可视化
- 微端服务器没有4个文件,微端服务器不传送数据库
- 构造二叉树-前序遍历