<!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. GitHub 新手教程 五，Git GUI 新手教程（2），Clone Existing Repository 克隆代码库

    1,注意: 网上大部分教程都是从“Create New Repository”讲起,这其实给我们新手埋了很大的一个坑.按照类似的教程,仅做到一半,各种错误窗口就会弹出来了,像什么:“非同一代码库”.“ ...

  2. Unity XLua 官方教程学习

    一.Lua 文件加载 1. 执行字符串 using UnityEngine; using XLua; public class ByString : MonoBehaviour { LuaEnv lu ...

  3. 树莓派Raspberry Pi微改款，Model B 3+规格探析

    18年3月树莓派基金会推出了ModelB 3+版的新款树莓派单板计算机.从编号数字上看,3+仅是3的再提升,在规格上有小幅异动,究竟改进或提升了哪些部分,本文将对此进行探讨. 树莓派版本观察 从过往的 ...

  4. N的阶乘：高精度

    N的阶乘 题目描述  输入一个正整数N,输出N的阶乘. 输入描述: 正整数N(0<=N<=1000) 输出描述:  输入可能包括多组数据,对于每一组输入数据,输出N的阶乘 示例1 输入 4 ...

  5. PAT甲题题解-1125. Chain the Ropes (25)-贪心水题

    贪心水题,每次取最短的两个绳子合并,长度缩减成一半 #include <iostream> #include <cstdio> #include <algorithm&g ...

  6. Hybrid APP基础篇(二)->Native、Hybrid、React Native、Web App方案的分析比较

    说明 Native.Hybrid.React.Web App方案的分析比较 目录 前言 参考来源 前置技术要求 楔子 几种APP开发模式 概述 Native App Web App Hybrid Ap ...

  7. IDA Pro 在CSAPP lab2中的使用

    在做lab2的时候,偶然的情况下,发现了IDA pro这样一个反汇编工具,总的来说对于lab2这样的小实验读懂代码的大体功能是有作用的,但对于想要具体明白某一条指令的执行过程,又显得不足,到最后还是需 ...

  8. tomcat运行JSP时产生的错误：”javax.servlet.servletexception: java.lang.nosuchmethoderror”

    这个错误其实是多次重复编译JAVA文件导致的,需要clean操作,简单的来说就是删除tomcat下work文件夹中工作空间,也可以理解为自己的虚拟路径,比如我运行的jsp的路径:localhost:8 ...

  9. Java单元测试框架 JUnit

    Java单元测试框架 JUnit JUnit是一个Java语言的单元测试框架.它由Kent Beck和Erich Gamma建立,逐渐成为源于KentBeck的sUnit的xUnit家族中为最成功的一 ...

  10. mysql左外连接

    左外连接的概念性不说了,这次就说一说两个表之间的查询步骤是怎么样的? 例如 SELECT ut.id,ut.name,ut.age, ut.sex,ut.status,st.score,st.subj ...