<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>canvas高级贝塞尔曲线运动动画</title>

<script src="js/modernizr.js "></script>

</head>

<body>

<script type="text/javascript ">

window.addEventListener('load',eventWindowLoaded,false);

function eventWindowLoaded(){

    canvasApp();

}

function canvasSupport(){

    return Modernizr.canvas;

}

function canvasApp(){

    if(!canvasSupport()){

        return;

    }

    var pointImage = new Image();

    pointImage.src="point.png ";

    function drawScreen(){
        //首先填充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个点组成的，在下面有注释

        var t = ball.t;

        var cx = 3*(p1.x-p0.x);

        var bx = 3*(p2.x-p1.x)-cx;

        var ax = p3.x-p0.x-cx-bx;

        var cy = 3*(p1.y-p0.y);

        var by = 3*(p2.y-p1.y)-cy;

        var ay = p3.y-p0.y-cy-by;

        var xt = ax*(t*t*t)+bx*(t*t)+cx*t+p0.x;

        var yt = 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(var i =0;i<points.length;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();

    }

        var p0={x:60,y:10};//起始点

        var p1={x:70,y:200};//1号点

        var p2={x:125,y:295};//2号点

        var p3={x:350,y:350};//3号点

        var ball={x:0,y:0,speed:.01,t:0};

        var points=new Array();

        //这里的起始点和3号点，我取得的名字比较通俗一下，实际上应该称为端点。因为必须要经过的
        //1号点和2号点虽然可以删除但是他控制着弧线的路径，我们就叫他控制点

        theCanvas = document.getElementById('canvas')

        context = theCanvas.getContext("2d")

        setInterval(drawScreen,33);

}

</script>

<canvas id="canvas" width="800 " height="800 ">

你的浏览器无法使用canvas

小白童鞋；你的支持是我最大的快乐！！

</canvas>

</body>

</html>"

http://files.cnblogs.com/files/LoveOrHate/canvas13.rar

好了大致也标注了一下重点之类的

有关贝塞尔的算法，我表示，我也是喜欢套公式的，让我自己研究公式你还是杀了我吧

刚刚有人问canvas是否能完成这样的效果，然后我就大致写了个大概！这个跨度跳的比较大的

实际上写博客只是为了让自己回顾下知识，毕竟当年刚开始学的时候有的地方也不是很理解！最后变成了瓶颈，困扰，所以重新回顾下的！这一篇写完，我又要继续枯燥的写基础了

因为我也没钱买空间放demo

所以大家把代码跑一下就行了-_-//

如果问我的工资都去哪里的话,我表示http://www.vogue.com.cn/     上面的东西很贵的！偶要把钱存起来，以后交女朋友很贵的T_T

html5 canvas高级贝塞尔曲线运动动画(好吧这一篇被批的体无完肤！都说看不懂了！没办法加注释了！当然数学不好的我也没办法了，当然这还涉及到一门叫做计算机图形学的学科)的更多相关文章

  1. HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版​

    HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程 ...

  2. 一款基于HTML5 Canvas的画板涂鸦动画

    今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...

  3. 【HTML】html5 canvas全屏烟花动画特效

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  4. HTML5 canvas绘制雪花飘落动画（需求分析、知识点、程序编写分布详解）

    看到网上很多展示html5雪花飞动的效果,确实非常引人入胜,我相信大家也跟我一样看着心动的同时,也很好奇,想研究下代码如何实现:虽然哦很多地方也能下载这些源码,不过也不知道别人制作此类动画时的思路及难 ...

  5. 基于HTML5 Canvas粒子效果文字动画特效

    之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的 ...

  6. 超酷！！HTML5 Canvas 水流样式 Loading 动画

    今天我们要分享另外一款基于HTML5 Canvas的液体流动样式Loading加载动画,这款Loading动画在加载时会呈现液体流动的动画效果,并且由于和背景颜色的对比,也略微呈现发光的动画效果. 效 ...

  7. HTML5 Canvas核心技术—图形、动画与游戏开发.pdf7

    性能 运行putImageData()比drawImage()慢,同等条件下优先考虑drawImage() 操作图像数据需要遍历大量数据,应该注意几点: 1)避免在循环体中直接访问对象属性,应当保存在 ...

  8. HTML5 Canvas核心技术—图形、动画与游戏开发.pdf2

    事件处理: HTML5应用程序是以事件来驱动的,可以在canvas中增加一个事件监听器,当事件发生时,浏览器就会调用这个监听器 //方法一canvas.onmousedown=function(e){ ...

  9. HTML5 Canvas核心技术—图形、动画与游戏开发.pdf1

    canvas元素可以说是HTML5元素中功能最强大的一个,它真正的能力是通过Canvas的context对象(绘图上下文)表现出来的 fillText()方法使用fillStyle属性来填充文本中的字 ...

随机推荐

  1. 上云利器，K8S应用编排设计器之快到极致

    前言在前面的文章中,我们已经提到,华为云有一个上云利器:应用编排设计器.作为华为云应用编排服务与用户沟通的桥梁,设计器坚持用户体验至上的理念,以图形化方式,在鼠标点击之间,助力企业快速上云.优质的交互 ...

  2. Python初学者随笔Week1

    Python从入门到放弃 本文主要是描述的是作为初学者对python学习的过程与经历分享,包括一些历程的分享与重要的时间节点记录,对于python学习的笔记与心得. 如果你也是初学者,我们可以一起学习 ...

  3. 本科毕业平均年薪 30 万！经济寒冬挡不住 AI 人才的火热！

    互联网行业遭遇寒冬,企业纷纷裁员缩招,而 BAT 和硅谷明星公司对 AI 人才的投入却并不见放缓.为争夺相关人才,给应届毕业生开出的平均年薪高达 30 万. 而 TensorFlow 作为当下最流行的 ...

  4. PAT甲题题解-1106. Lowest Price in Supply Chain (25)-(dfs计算树的最小层数)

    统计树的最小层数以及位于该层数上的叶子节点个数即可. 代码里建树我用了邻接链表的存储方式——链式前向星,不了解的可以参考,非常好用: http://www.cnblogs.com/chenxiwenr ...

  5. kafka学习总结之集群部署和zookeeper

    1.  集群部署 kafka集群的瓶颈主要在网络和磁盘上:kafka依赖于zookeeper,zookeeper集群的节点采用奇数个,3个节点允许一个节点失败,5个节点允许2个节点失败. 图 1 ka ...

  6. 第二个spring冲刺第7天

    今天因为停电,所以没什么进展,延迟一天工作,今天当作休息

  7. 原生 js 封装get ,post, delete 请求

    现在的项目中都在用VUE 以及react 等MVC, MVVM  框架. 丢弃了原始的JQ .不可能为了个$.ajax();而把JQ引进来吧. 在vue1的开发中 提供了 vueResouce, vu ...

  8. Docker(十二)-Docker Registry镜像管理

    Registry删除镜像.垃圾回收 Docker仓库在2.1版本中支持了删除镜像的API,但这个删除操作只会删除镜像元数据,不会删除层数据.在2.4版本中对这一问题进行了解决,增加了一个垃圾回收命令, ...

  9. Jira 7.2.4简单安装过程

    1. 下载安装jira的安装文件 这里使用同事已经下载好的文件. 2. 下载破解文件. 也是同事下载好的 具体文件为 atlassian-jira-software--x64 51CTO下载-jira ...

  10. shell脚本实现多台服务器自动巡检

    shell脚本实现多台服务器自动巡检 摘要:         运维服务一个项目二十多台(或者多台)服务器,每天要做服务器的性能巡检工作是查看服务器的CPU.内存.磁盘空间是否在正常值范围内.像这样每天 ...