<!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. Windos 下python2.7安装 pymssql 解决方案

    最近在学python,到安装pymssql这一块遇到了不少问题. 第一:如何安装python 模块,也是最主要的问题. 可以这么理解:在安装python其它模块之前,可以先安装一个负责安装模块的模块. ...

  2. 【Alpha阶段】M1事后报告

    时间:2015-11-13 23:30 地点:七公寓一楼会议室 参与人员:窝窝头全体成员(王若愚因事请假) 设想和目标 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述 ...

  3. 《Linux内核设计与实现》第四周读书笔记——第五章

    <Linux内核设计与实现>第四周读书笔记--第五章 20135301张忻 估算学习时间:共1.5小时 读书:1.0 代码:0 作业:0 博客:0.5 实际学习时间:共2.0小时 读书:1 ...

  4. LINUX内核分析第四周学习总结——扒开系统调用的“三层皮”

    LINUX内核分析第四周学习总结--扒开系统调用的"三层皮" 标签(空格分隔): 20135321余佳源 余佳源 原创作品转载请注明出处 <Linux内核分析>MOOC ...

  5. Zoom 会议系统

    Jfrog的培训过程中 发现ppt的效果很不理想  讲师使用zoom的方式效果很好 首先说一下 zoom的定价体系 官网信息: https://www.zoom.us/profile 好像必须使用 企 ...

  6. 用node编写cli工具

    cli是command-line interface的缩写,即命令行工具,常用的vue-cli, create-react-app, express-generator 等都是cli工具. 本文以自己 ...

  7. phpStudy-坑爹的数据库管理器-phpMyAdmin的默认用户名和密码

    在这里我必须承认自己的弱智,第一次使用phpMyAdmin竟然搞了10分钟才进去!!! 要使用默认的用户名和密码: 用户名:root 密码:root 尼玛!坑爹啊!不说清楚让我百度了半天!!!!

  8. Vue实现对数组、对象的深拷贝、复制

    当组件间传递对象时,由于此对象的引用类型指向的都是一个地址(除了基本类型跟null,对象之间的赋值,只是将地址指向同一个,而不是真正意义上的拷贝),如下 数组: ,,]; var b = a; b.p ...

  9. ES6学习笔记（五）：Class和Module

    Class Class 只是一个语法糖,其功能用es5也能实现,但是比es5更符合类的期待 定义: constructor代表构造方法,而this指向new 生成的实例 定义类方法时,可以不使用fun ...

  10. ES6学习笔记（二）：引用数据类型

    Array 新增方法 1.Array.from() 将类数组(dom对象 或 arguments)或set\map对象转换为数组 2.Array.of() 将一组值转换为数组,例如Array.of(3 ...