<!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. tomcat设置开机自启动和后台运行

    前言:当浏览器页面显示不出来的时候,重启装在服务器上的tomcat可以正常使用,是通过进入tomcat的bin目录,双击startup.bat运行启动的程序,这时会弹出启动窗口(tomcat的运行日志 ...

  2. torchvision 批量可视化图片

    1.1 简介 计算机视觉中,我们需要观察我们的神经网络输出是否合理.因此就需要进行可视化的操作. orchvision是独立于pytorch的关于图像操作的一些方便工具库. torchvision的详 ...

  3. Shell 基础 -- 总结几种括号、引号的用法

    Shell 脚本中经常需要用到一些括号.引号表达式,功能各不相同,本文详细介绍一下. 1.双引号 " " 双引号常用于包含一组字符串,在双引号中,除了 "$". ...

  4. [paper]MaskFusion: Real-Time Recognition, Tracking and Reconstruction of Multiple Moving Objects

    Before 近期在调研关于RGBD在室内移动机器人下的语义导航的研究.目前帝国理工的Andrew Davison在这边有两个团队在研究,分别是Fusion++ 和 这篇 MaskFusion.这篇是 ...

  5. CSAPP lab2 二进制拆弹 binary bombs phase_3

    给出对应于7个阶段的7篇博客 phase_1  https://www.cnblogs.com/wkfvawl/p/10632044.htmlphase_2  https://www.cnblogs. ...

  6. Linux内核分析（第五周）

    系统调用的三层皮(下) 一.给MenuOs增加time和time-asm命令 ls rm menu -rf git clone xx(克隆新版本) cd menu make rootfs(自动编译生成 ...

  7. VS系列软件中debug和release编译环境有什么区别

    当编译和执行一个工程时,可以在Debug和Release两种配置下执行. Debug模式用于调试程序,这是个受保护的运行环境,它将告诉你程序是否有泄露,在运行时也能对特定函数的结果进行检查.然而它生成 ...

  8. Daily Scrum - 12/02

    Meeting Minutes Shuo终于把文件存取弄好了!Wei大致把后端的代码整合好了,现在是可以基本实现算法的一个简易背单词版本.另外我们又交流了一下UI方面的事情,发现还是有一些问题(特别是 ...

  9. MongoDB给数据库创建用户

    一.先以非授权的模式启动MongoDB 非授权: linux/Mac : mongod -f /mongodb/etc/mongo.conf windows  : mongod --config c: ...

  10. 贝叶斯先验解释l1正则和l2正则区别

    这里讨论机器学习中L1正则和L2正则的区别. 在线性回归中我们最终的loss function如下: 那么如果我们为w增加一个高斯先验,假设这个先验分布是协方差为 的零均值高斯先验.我们在进行最大似然 ...