html5 canvas高级贝塞尔曲线运动动画(本篇跨度较大!为了帮助别人解决个问题顺带的!)

<!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(){
        context.fillStyle = ‘#eee‘
        context.fillRect(0,0,theCanvas.width,theCanvas.height);
        //边框
        context.strokeStyle = ‘#eee‘
        context.strokeRect(1,1,theCanvas.width,theCanvas.height);

        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;

        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.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();

        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

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

如果问我月入上W的话,我表示http://www.vogue.com.cn/     上面的东西很贵的!偶要把钱存起来,以后交女朋友很贵的T_T

时间: 2024-10-02 15:59:41

html5 canvas高级贝塞尔曲线运动动画(本篇跨度较大!为了帮助别人解决个问题顺带的!)的相关文章

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

HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程序直接切入这套API,全面讲解其功能,以求让读者实现出内容丰富且界面一致的网络应用程序,并将开发好的程序部署在多种设备及操作系统之上. 教程地址:HTML5 Canvas核心技术:图形.动画与游戏开发 PDF扫描版? HTML5 Canvas核心技术:图形.动画与游戏开发 目录: 前言 第1章 基础知识 1.

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

路径与子路径 在某一时刻,canvas之中只能有一条路径存在,Canvas规范称之为“当前路径”(current path),这条路径却可以包含很多子路径(subpath),子路径是由两个或者更多点组成的 context.beginPath(); context.rect(10,10,100,100); context.stroke(); context.beginPath(); //清除上次调用rect()方法所创建的路径 context.rect(50,50,100,100); contex

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

第6章 精灵 精灵(sprite),它是一种可以集成入动画之中的图像对象,赋予它们各种行为,精灵并非Canvas API的一部分,,但都是从它衍生而来 本章将会实现三种设计模式:策略模式(精灵与绘制器解耦).命令模式(精灵的动作).享元模式(一个实例表示多个精灵) painter属性是一个指向Painter对象的引用,使用paint(sprite,context)方法来绘制精灵,behaviors属性指向一个对象数组,数组中每个对象都会以execute(sprite,context,time)方

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

文本的定位 水平与垂直定位:当使用strokeText()和fillText()绘制文本时,指定了所绘文本的X与Y坐标,还有textAlign与textBaseline两个属性 textAlign:start(默认) center end left right,当canvas元素的dir属性是ltr时,left效果与start相同,right与end相同,如果dir属性是rtl,则相反 textBaseline:top bottom middle alphabetic(默认,基于拉丁字母) id

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

CanvasRenderingContext2D对象中用于平移.旋转坐标系的方法 镜像 scale(1,-1)绘制垂直镜像:scale(-1,1)绘制水平镜像 自定义的坐标变换 transform(),多次调用会叠加效果 setTransform(),每次调用都会清除上次的效果 两个方法都用于旋转.缩放.及平移坐标系(可以根据公式传入0或其他数据) x'=ax+cy+e y'=bx+dy+f 坐标系旋转公式(angle弧度) x'=x×cos(angle)-(y×sin(angle)) y'=y

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

canvas元素可以说是HTML5元素中功能最强大的一个,它真正的能力是通过Canvas的context对象(绘图上下文)表现出来的 fillText()方法使用fillStyle属性来填充文本中的字符,strokeText()方法使用strokeStyle属性描绘字符的轮廓线,fillStyle属性和strokeStyle属性可以是CSS格式的颜色.渐变色或是图片 fillText()与strokeText()方法都需要3个参数:要绘制的文本内容,以及在canvas中显示文本的横.纵坐标 注意

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

性能 运行putImageData()比drawImage()慢,同等条件下优先考虑drawImage() 操作图像数据需要遍历大量数据,应该注意几点: 1)避免在循环体中直接访问对象属性,应当保存在局部变量中 2)应该用循环计数器遍历完整的像素,而非像素分量(每4个一组) 3)逆向遍历与移位技巧效果并不好 4)不要频繁使用getImagedata() 视频处理 var video=document.getElementById('video'); //A <video>element ...

html5 canvas绘图-贝塞尔曲线

贝塞尔曲线(ezier curve)最迟是由法国物理学家与数学家paul de Casteljau发明的.它的广泛运用则要归功于法国工程师皮埃尔 贝塞尔 贝塞尔曲线期初被用在汽车车身的设计上.现在则多用于计算机图形系统中.例如Adobe Illustrator/Apple的Cocoa框架以及在Html5的canvas. 贝塞尔曲线分为两种:平方(quadratic)贝塞尔曲线及立方(cubic)贝塞尔曲线.平方贝塞尔曲线是一种二次曲线(second degree curve),意思就是说,它们是

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

操作图像的像素:getImageData() putImageData() ImageData对象 调用getImageData()方法实际是获取了一个指向ImageData对象的引用,返回的对象包含3个属性:1)width以设备像素为单位的图像数据宽度 2)height以设备像素为单位的图像数据高度 3)data包含各个设备像素数值的数组 width和height都是只读的无符号长整数,data属性包含的每个数组元素都表示图像数据中相应的像素值,每个值包含的颜色分量都是含有8个二进制位的整数(