html5绘制运动的图形,html5 canvas高级贝塞尔曲线运动动画
window.addEventListener('load',eventWindowLoaded,false);functioneventWindowLoaded(){
canvasApp();
}functioncanvasSupport(){returnModernizr.canvas;
}functioncanvasApp(){if(!canvasSupport()){return;
}varpointImage= newImage();
pointImage.src="point.png";functiondrawScreen(){ //首先填充canvas的背景
context.fillStyle= '#eee'context.fillRect(0,0,theCanvas.width,theCanvas.height);//边框
context.strokeStyle= '#eee'context.strokeRect(1,1,theCanvas.width,theCanvas.height);
//在这里解释下贝塞尔曲线,看网页底部的那个点击成Canvas三次贝塞尔曲线操作实例!你就会发现一个曲线是由4个点组成的,在下面有注释vart=ball.t;varcx= 3*(p1.x-p0.x);varbx= 3*(p2.x-p1.x)-cx;varax=p3.x-p0.x-cx-bx;varcy= 3*(p1.y-p0.y);varby= 3*(p2.y-p1.y)-cy;varay=p3.y-p0.y-cy-by;varxt=ax*(t*t*t)+bx*(t*t)+cx*t+p0.x;varyt=ay*(t*t*t)+by*(t*t)+cy*t+p0.y;
//这里的xt和yt贝塞尔曲线的公式,这里涉及到一门叫做计算机图形学的学科(大学里面有上,我也最近一直在上)//0 <= t <= 1这是一个T....学过图形学的应该知道比如一根直线他的起始坐标轴的位置(0,0)然后有DDA算法计算斜率,他也是一样,具体的公式网上还是都有的,我的语言组织也不是很好-_-//
ball.t+=ball.speed;if(ball.t>1){
ball.t=1;
}//绘制点
context.font= "10px sans";
context.fillStyle= "#ff0000";
context.beginPath();
context.arc(p0.x,p0.y,8,0,Math.PI*2,true);
context.closePath();
context.fill();
context.fillStyle= "#fff";
context.fillText("0",p0.x-2,p0.y+2);//points.push({x:xt,y:yt});for(vari=0;i
context.drawImage(pointImage,points[i].x,points[i].y,1,1);
}
//绘制图片重点!!!!图片,定位context.drawImage(img,x,y,width,height);也就是绘制那个点后的小点的轨迹
context.closePath();
context.fillStyle="#000000";
context.beginPath();
context.arc(xt,yt,5,0,Math.PI*2,true);
context.closePath();
context.fill();
}varp0={x:60,y:10};//起始点varp1={x:70,y:200};//1号点varp2={x:125,y:295};//2号点varp3={x:350,y:350};//3号点varball={x:0,y:0,speed:.01,t:0};varpoints=newArray();
//这里的起始点和3号点,我取得的名字比较通俗一下,实际上应该称为端点。因为必须要经过的 //1号点和2号点虽然可以删除但是他控制着弧线的路径,我们就叫他控制点
theCanvas=document.getElementById('canvas')
context=theCanvas.getContext("2d")
setInterval(drawScreen,33);
}
你的浏览器无法使用canvas
小白童鞋;你的支持是我最大的快乐!!
html5绘制运动的图形,html5 canvas高级贝塞尔曲线运动动画相关推荐
- html5绘制节点链接,利用HTML5实现网状结构节点动画特效
特效描述:利用HTML5实现 网状结构 节点动画特效.利用HTML5实现网状结构节点动画特效 代码结构 1. HTML代码 (function() { var canvas, ctx, circ, n ...
- Html5学习------canvas绘制径向渐变图形
<!DOCTYPE HTML> <html><head><meta http-equiv="Content-Type" content=& ...
- 使用 HTML5 canvas 绘制精美的图形
HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C "工作草案" - 意味着它仍然处于开发阶段 - 它包含丰富的元素和属性,它 ...
- html5 canvas绘制图形,html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- html实例教程 图片绘画,Html5 canvas绘制一个机器人图形的实例教程
Canvas的功能强大,今天我只运用到Canvas的绘制图形功能来完成一个简单线条型机器人的绘制,在绘图的过程中我还是得复述一下用到的几个图形的基础知识,通过这个实例,你可以基本上了解到Canvas的 ...
- html5 绘制图形,HTML5绘制几何图形
绘制几何图形 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext(" ...
- html5绘制基本图形代码,一波HTML5Canvas基础绘图实例代码集合
CSS中p.art #p2和p#p2比较,那个的特殊性更高 html5 两个canvas重叠放在一个div里面,每个canvas 将图片素材引入网页,定义canvas标签,获取canvas的上下文.定 ...
- html5怎么画坐标图,新手如何5分钟学会用canvas在HTML5上画简单图形
HTML5中的另外一个新元素是标签.须要使用JavaScript来操做和绘制画布. canvas元素为脚本提供了一个依赖于分辨率的位图画布,它能够用于呈现图形.游戏图形或其余可视图像. 当一个更合适的 ...
- 新手如何5分钟学会用canvas在HTML5上画简单图形
HTML5中的另一个新元素是标签.需要使用JavaScript来操作和绘制画布. canvas元素为脚本提供了一个依赖于分辨率的位图画布,它可以用于呈现图形.游戏图形或其他可视图像. 当一个更合适的元 ...
最新文章
- java export命令_Linux 命令详解(一)export 命令
- VMware下Windows Server 2012添加新磁盘
- 入门训练 Fibonacci数列
- Java需要注意的一些小细节
- python常见的数据结构
- 如何在html上做弹框效果,网页|利用提示框(Tooltip)实现弹窗效果
- matlab:Matlab基础教程 第三章 数组和向量
- Laplacian算子-Log算子-Dog算子边缘检测原理合集及实现
- 百度Apollo计划跟踪:Apollo 3.0前言
- 星星之火-58:CPRI协议缺点,eCPRI协议是如何克服CPRI协议的不足?
- 数字滤波算法——程序判断滤波
- Linux性能优化(七)——网络流量监控工具
- 双硬盘双win10互不干扰_双硬盘双系统 完全独立|硬盘安装Win10单双系统的详细步骤...
- linux怎么查看终端号,怎么查看linux 图形终端设备号
- android 8.0手机无法更新版本,微信8.0安卓怎么更新 安卓微信更新不了8.0解决办法...
- Discuz deleterow函数解析
- Unity3D 场景中图片模糊问题
- 《灰故事》:他用曲笔描绘着我们
- java判断微信号、手机、名字的正则表达
- Python 爬虫实战(1)
热门文章
- 如何用深度学习模型为自己做个漫画画像(含代码流程)(转载)
- linux(debian10)安装pip3方法,并修改安装源为国内源
- macos安装第三方软件提示文件损坏
- [ECCV2018] 端到端的弯曲文本检测与识别
- excel 表格批量添加qq.com后缀
- 殷人昆《数据结构与算法解析》目录(持续更新)
- 腾讯新总部曝光,藏着让4万员工拼命工作的套路!
- 解决iphone4 4s的静音按键失灵故障
- Linux入门--教程2(点灯笼)例如: ls -l, rm, mv, grep
- 给博客添加红灯笼效果