<!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. 开发工具之Spark程序开发详解

    一  使用IDEA开发Spark程序 1.打开IDEA的官网地址,地址如下:http://www.jetbrains.com/idea/ 2.点击DOWNLOAD,按照自己的需求下载安装,我们用免费版 ...

  2. c语言数字图像处理（三）：仿射变换

    仿射变换及坐标变换公式 几何变换改进图像中像素间的空间关系.这些变换通常称为橡皮模变换,因为它们可看成是在一块橡皮模上印刷一幅图像,然后根据预定的一组规则拉伸该薄膜.在数字图像处理中,几何变换由两个基 ...

  3. PHP Laravel 连接并访问数据库

    第一次连接数据库 数据库配置位于config/database.php数据库用户名及密码等敏感信息位于.env文件创建一个测试表laravel_course <?php namespace Ap ...

  4. PAT甲题题解-1025. PAT Ranking (25)-排序

    排序,求整体的排名和局部的排名整体排序,for循环一遍同时存储整体目前的排名和所在局部的排名即可 #include <iostream> #include <cstdio> # ...

  5. C++：多态浅析

    1.多态 在C++中由两种多态性: • 编译时的多态性:通过函数的重载和运算符的重载来实现的 • 运行时的多态性:通过类继承关系和虚函数来实现的 特别注意: a.运行时的多态性是指程序执行前,无法根据 ...

  6. Control-Tree

    Fast Failover for Control Traffic in Software-defined Networks 2012 应该是第一篇关于控制树的,讨论了关于In-Band控制平面单个控 ...

  7. 设置matplotlib画图支持中文显示

    1.安装中文字体 git clone https://github.com/tracyone/program_font && cd program_font && ./ ...

  8. ElasticSearch 2 (24) - 语言处理系列之停用词：性能与精度

    ElasticSearch 2 (24) - 语言处理系列之停用词:性能与精度 摘要 在信息检索早期,磁盘和内存相较我们今天的使用只是很小的一部分.将索引空间保持在一个较小的水平是至关重要的,节省每个 ...

  9. 个人作业-Week 2 代码复审

    一.概要部分 1.代码能符合需求和规格说明么? 经过我自己的测试和助教的检测,他的代码符合需求和规格的说明. 2.代码设计是否有周全的考虑? 这里代码设计我们是从两个方面检查的: 对方处理控制台输入的 ...

  10. PSP（3.13——3.15）以及周记录

    3.13 0:00 4:00 10 230 Cordova插件1,的尝试 N min 10:50 11:30 10 30 英语百词斩 N min 18:00 22:55 20 275 写博客 Y mi ...