html4 demo,canvas-demo4.html

1.绘制线条

*{

margin: 0;

padding: 0;}

body>* {

}

canvas{

display: block;

}

你的浏览器居然不支持Canvas？！赶快换一个吧！！

window.οnlοad=function () {

};

//贝塞尔曲线定义

function Point2D(x,y){

this.x=x||0.0;

this.y=y||0.0;

}

function PointOnCubicBezier( cp, t )

{

var ax, bx, cx;

var ay, by, cy;

var tSquared, tCubed;

var result = new Point2D ;

/*計算多項式係數*/

cx = 3.0 * (cp[1].x - cp[0].x);

bx = 3.0 * (cp[2].x - cp[1].x) - cx;

ax = cp[3].x - cp[0].x - cx - bx;

cy = 3.0 * (cp[1].y - cp[0].y);

by = 3.0 * (cp[2].y - cp[1].y) - cy;

ay = cp[3].y - cp[0].y - cy - by;

/*計算位於參數值t的曲線點*/

tSquared = t * t;

tCubed = tSquared * t;

result.x = (ax * tCubed) + (bx * tSquared) + (cx * t) + cp[0].x;

result.y = (ay * tCubed) + (by * tSquared) + (cy * t) + cp[0].y;

return result;

}

//画布绘制

var cans= document.getElementById('canvas');

var can2d= cans.getContext('2d');

var img= document.getElementById('img1');

var img3= document.getElementById('imgbg');

var start=1, min=1, max=110, ltrue=[false, false];

// start开始值， min=开始值，max范围值

can2d.beginPath();

img.οnlοad=function () {

ltrue[0]=true;

loadImg(ltrue);

};

img3.οnlοad=function () {

ltrue[1]=true;

loadImg(ltrue);

};

function loadImg(i) {

if(i[0] && i[1]){

can2d.save();

requestAnimationFrame(myfun);

}

}

//两张图片的遮罩动画

// function myfun(){

// can2d.restore();

// can2d.save();

// can2d.clearRect(0,0, 500, 500);

//

// can2d.drawImage(img3, 0, 0, 500, 500);

//

// // can2d.fillStyle="green";

// // can2d.fillRect(0,0,500,500);

//

// can2d.globalCompositeOperation="destination-in";

//

// // can2d.fillStyle="green";

// // can2d.fillRect(100-i/2,100-i/2,50+i,50+i);

//

// can2d.drawImage(img, 100-i/2, 100-i/2, 50+i, 50+i);

// i++;

// requestAnimationFrame(myfun);

// }

var setp= 120; //120fps， 20ms/fps

var cp=[

//匀速---实际效果越来越慢

new Point2D(0, 0), new Point2D(0.5, 0.5), new Point2D(0.5, 0.5), new Point2D(1, 1)

//加速---实际效果匀速一样

// new Point2D(0, 0), new Point2D(0.95, 0.05), new Point2D(0.795, 0.035), new Point2D(1, 1)

// new Point2D(0, 0), new Point2D(1, 0), new Point2D(1, 0), new Point2D(1, 1)

// new Point2D(0, 0), new Point2D(0.55, 0.055), new Point2D(0.675, 0.19), new Point2D(1, 1)

];

function myfun(){

can2d.restore();

can2d.save();

can2d.clearRect(0,0, 1920, 856);

can2d.drawImage(img3, 0, 0, 1920, 856);

can2d.globalCompositeOperation="destination-in";

var cur = 1 / setp * start; //120帧到20倍的过渡

var cbz= (PointOnCubicBezier( cp, cur).y+PointOnCubicBezier( cp, cur).x)/2 * (max-min) + min; //取贝塞尔曲线的y坐标过渡。

// var size= zoom(200,200, cbz),

// zom= zoom(200, 200, cbz, true);

// can2d.drawImage(img, 500-zom[0]/2, -100-zom[1]/2, size[0], size[1]);

var size= zoom(50,50, cbz),

zom= zoom(50, 50, cbz, true);

can2d.drawImage(img, 935-zom[0]/2, -25-zom[1]/2, size[0], size[1]);

start=start+1;

if(start>setp){

return false;

}

// if(settime) clearTimeout(settime);

// settime = setTimeout(function () {

// myfun();

// }, 25);

requestAnimationFrame(myfun); //默认20ms

}

//通过缩放控制尺寸时计算用

function zoom(w, h, scale, type) {

/*

* 按放大倍数去过渡，会造成实际尺寸过渡越来越小。

* 【需改为按尺寸去做过渡】

* */

// type：true 增大的尺寸与缩小的尺寸 || 默认false缩放后的当前尺寸

// scale 缩放倍率

if (!type) return [(scale * w).toFixed(0), (scale * h).toFixed(0)];

if (scale === 1) {

return [0, 0]

} else if (scale > 1) {

return [((scale - 1) * w).toFixed(0), ((scale - 1) * h).toFixed(0)]

} else {

return [((1 - scale) * w).toFixed(0), ((1 - scale) * h).toFixed(0)]

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史