wushenghua/vczero.github.io
1
0
Fork 0
mirror of https://github.com/wu736139669/vczero.github.io.git synced 2026-08-05 06:23:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

add ctrip

Browse Source
This commit is contained in:
vczero
2015-04-28 17:36:41 +08:00
parent 2e8b53db2b
commit b647597dbc
8 changed files with 351 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ctrip/.project
+43
View File
@@ -0,0 +1,43 @@
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>ctrip</name>
<comment>Create By HBuilder</comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>com.aptana.ide.core.unifiedBuilder</name>
<arguments>
</arguments>
</buildCommand>
<buildCommand>
<name>com.aptana.editor.php.aptanaPhpBuilder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
<natures>
<nature>com.aptana.projects.webnature</nature>
<nature>com.aptana.editor.php.phpNature</nature>
</natures>
<filteredResources>
<filter>
<id>1429798119704</id>
<name></name>
<type>10</type>
<matcher>
<id>org.eclipse.ui.ide.orFilterMatcher</id>
<arguments>
<matcher>
<id>org.eclipse.ui.ide.multiFilter</id>
<arguments>1.0-projectRelativePath-matches-false-false-bin</arguments>
</matcher>
<matcher>
<id>org.eclipse.ui.ide.multiFilter</id>
<arguments>1.0-projectRelativePath-matches-false-false-setting</arguments>
</matcher>
</arguments>
</matcher>
</filter>
</filteredResources>
</projectDescription>
ctrip/canvas.js
-153
View File
@@ -1,153 +0,0 @@
;(function(exports, require){
var canvas = document.getElementsByTagName('canvas')[0];
var context = canvas.getContext('2d');
var ajax = require.ajax;
var addEvent = require.addEvent;
var data = require.data;
//缩放比例
var SCALE_BIG = 1;
var SCALE_SML = 0.25;
//颜色对应表
var COLOR_LIST = {
BODY: '#63CEF6',
DUPI: '#FFF',
EYE: '#034E68',
ZUIBA: '#0089B5',
TOUQUAN: '#BDF9FB',
JIUWO: '#FFBFE3',
QIPAO: '#C9E8FB',
BISHANG: '#46BEEF',
BIXIA: '#54C5F2',
GO: '#B1DBF2'
};
if(!context){
return;
}
if(!window.requestAnimationFrame){
return window.requestAnimationFrame = (function(){
window.webkitRequestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.oRequestAnimationFrame
|| window.msRequestAnimationFrame
|| function(callback, el){
window.setTimeout(callback, 1000/ 60);
};
})();
}
context.scale(SCALE_SML, SCALE_SML);
//draw polygon
function drawPolygon(data, part, color){
var xys = data[part];
context.beginPath();
context.fillStyle = color;
context.moveTo(xys[0], xys[1]);
for(var i = 2; i < xys.length; i++){
if(i % 2 !== 0){
context.lineTo(xys[i-1], xys[i]);
}
}
context.fill();
context.closePath();
}
//draw eye
function drawEye(data, part, color){
var xys = data[part];
context.beginPath();
context.fillStyle = color;
//变形
context.save();
context.scale(1.5, 2);
context.arc(xys[0]/1.5, xys[1]/2, 6, 0, Math.PI * 2, false);
context.restore();
context.fill();
context.closePath();
}
//drawCircle
function drawCircle(data, part, color, radius){
var xys = data[part];
context.beginPath();
context.fillStyle = color;
context.arc(xys[0], xys[1], radius, 0, Math.PI * 2, false);
context.fill();
context.closePath();
}
//draw line
function drawLine(data, part, color, width){
var xys = data[part];
context.beginPath();
context.strokeStyle = color;
context.lineWidth = width;
context.moveTo(xys[0], xys[1]);
for(var i = 0; i < xys.length; i++){
if(i % 2 !== 0){
context.lineTo(xys[i-1], xys[i]);
}
}
context.stroke();
context.closePath();
}
//draw text
function drawText(x, y){
context.beginPath();
context.fillStyle = '#FFFFFF';
context.font = '40px arial,sans-serif';
context.fillText('go...', x, y)
context.fill();
context.closePath();
}
//绘制
function draw(fileName){
drawPolygon(data, 'polygon_body', COLOR_LIST.BODY);
drawPolygon(data, 'polygon_dupi', COLOR_LIST.DUPI);
drawPolygon(data, 'polygon_touquan', COLOR_LIST.TOUQUAN);
drawPolygon(data, 'polygon_jiuwo1', COLOR_LIST.JIUWO);
drawPolygon(data, 'polygon_jiuwo2', COLOR_LIST.JIUWO);
drawPolygon(data, 'polygon_go', COLOR_LIST.GO);
drawEye(data, 'circle_eye1', COLOR_LIST.EYE);
drawEye(data, 'circle_eye2', COLOR_LIST.EYE);
drawLine(data, 'line_zui', COLOR_LIST.ZUIBA, 4);
drawLine(data, 'line_bishang', COLOR_LIST.BISHANG, 8);
drawLine(data, 'line_bixia', COLOR_LIST.BIXIA, 5);
drawCircle(data, 'circle_qipao1', COLOR_LIST.QIPAO, 30);
drawCircle(data, 'circle_qipao2', COLOR_LIST.QIPAO, 25);
drawCircle(data, 'circle_qipao3', COLOR_LIST.QIPAO, 15);
drawCircle(data, 'circle_qipao4', COLOR_LIST.QIPAO, 20);
drawCircle(data, 'circle_qipao5', COLOR_LIST.QIPAO, 15);
drawCircle(data, 'circle_qipao6', COLOR_LIST.QIPAO, 10);
drawCircle(data, 'circle_qipao7', COLOR_LIST.QIPAO, 16);
drawText(320, 69);
}
//执行流程
draw('dist_3');
})(window, window);
ctrip/data.js
-1
View File
File diff suppressed because one or more lines are too long
ctrip/img/2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

ctrip/index.html
+17 -7
View File
@@ -1,14 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>携程游游矢量化</title>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas width="130" height="130"></canvas>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript" src="canvas.js" ></script>
<canvas id="canvas_1" width="500" height="500" style="border:1px solid #ccc;"></canvas>
<img src="img/2.png" />
<canvas id="canvas_2" width="500" height="500" style="border:1px solid #ccc;"></canvas>
<canvas id="canvas_3" width="500" height="500" style="border:1px solid #ccc;"></canvas>
<img src="" style="width:314px;">
<canvas id="canvas_4" width="500" height="500" style="border:1px solid #ccc;"></canvas>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/canvas_2.js" ></script>
<script type="text/javascript">
new UU(document.getElementById('canvas_1'), 1).draw();
new UU(document.getElementById('canvas_2'), .75).draw();
new UU(document.getElementById('canvas_3'), .5).draw();
new UU(document.getElementById('canvas_4'), .25).draw();
</script>
</body>
</html>
ctrip/js/canvas_2.js
+275
View File
@@ -0,0 +1,275 @@
;(function(exports){
if(!document.createElement('canvas').getContext('2d')){
return;
}
var COLOR_LIST = {
BODY: '#86CFF8',
DU_PI: '#FFF',
TOU_QUAN: '#B6F5F8',
CHI_BANG_1: '#86CFF8',
CHI_BANG_2: '#86CFF8',
WEI_BA: '#86CFF8'
};
var body = [112, 253, 95, 209, 110, 149,
110, 145, 118, 112, 173, 92,
173, 92, 253, 70, 282, 104,
286, 103, 288, 131, 305, 150,
305, 151, 320, 173, 315, 196,
314, 199, 314, 210, 307, 217,
306, 221, 313, 228, 319, 236,
319, 236, 323, 260, 323, 288,
323, 290, 322, 319, 309, 343,
309, 344, 295, 367, 274, 379,
274, 379, 256, 392, 230, 399,
228, 401, 212, 400, 190, 384,
190, 386, 155, 363, 136, 328,
130, 318, 123, 272, 112, 253];
var dupi = [171, 292, 163, 260, 184, 246,
184, 246, 208, 237, 228, 242,
230, 242, 253, 227, 262, 225,
262, 225, 292, 218, 304, 230,
306, 232, 317, 254, 315, 282,
315, 282, 310, 329, 298, 344,
298, 344, 277, 375, 254, 379,
254, 379, 226, 385, 210, 367,
208, 369, 187, 344, 173, 305,
172, 306, 165, 280, 171, 269];
var touquan = [79, 130, 83, 106, 89, 105,
132, 144, 114, 123, 124, 124,
185, 115, 221, 106, 268, 92,
268, 92, 273, 96, 285, 105,
214, 133, 169, 142, 116, 142,
119, 142, 89, 166, 79, 168,
86, 168, 80, 157, 73, 148,
130, 142, 87, 137, 79, 130];
var chibang_1 = [88, 308, 89, 281, 112, 255,
114, 257, 125, 252, 130, 257,
130, 258, 139, 266, 139, 274,
139, 274, 124, 290, 98, 310,
98, 310, 92, 314, 88, 310];
var chibang_2 = [318, 234, 349, 243, 372, 270,
372, 270, 379, 274, 372, 282,
372, 282, 356, 280, 320, 271,
320, 272, 320, 266, 315, 246];
var chibang_2_new = [314, 232, 324, 230, 341, 233,
342, 233, 350, 234, 366, 242,
368, 244, 374, 253, 376, 258,
375, 262, 347, 263, 315, 257];
var chibang_1_new = [72, 288, 84, 269, 101, 256,
114, 243, 127, 253, 127, 253,
127, 255, 128, 265, 123, 273,
126, 278, 112, 284, 87, 296,
87, 296, 79, 299, 70, 290];
var weiba = [145, 425, 152, 398, 160, 398,
160, 398, 172, 391, 191, 391,
191, 391, 187, 380, 189, 370,
191, 371, 208, 380, 226, 388,
228, 390, 221, 393, 228, 404,
230, 406, 241, 414, 245, 432,
245, 432, 240, 457, 231, 446,
231, 446, 211, 433, 204, 414,
204, 409, 185, 424, 145, 425];
var weiba_new = [200, 438, 190, 397, 230, 394,
230, 397, 262, 410, 260, 445,
260, 425, 200, 415, 240, 405,
230, 407, 220, 430, 200, 440
];
function drawZui(ctx){
//重复加粗
for(var i = 0; i < 3; i++){
ctx.beginPath();
ctx.strokeStyle = '#099FDE';
ctx.bezierCurveTo(195 - i, 210, 209, 210 + i, 224, 189);
ctx.bezierCurveTo(224, 189, 228, 180 + i, 244, 183);
ctx.bezierCurveTo(244, 183, 267, 189 + i, 270, 186);
ctx.stroke();
ctx.closePath();
}
}
function drawEye(ctx, x, y){
ctx.beginPath();
ctx.fillStyle = '#000';
ctx.save();
ctx.scale(1.5, 2);
ctx.arc(x/1.5, y/2, 6, 0, Math.PI * 2, false);
ctx.restore();
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = '#ddd';
ctx.save();
ctx.scale(1.5, 2);
ctx.arc((x + 3)/1.5, (y - 5)/2, 3, 0, Math.PI * 2, false);
ctx.restore();
ctx.fill();
ctx.closePath();
}
//酒窝
function drawJiuWo(ctx, x, y){
ctx.beginPath();
ctx.fillStyle = '#FFBFE3';
ctx.save();
ctx.scale(2.1, 1.2);
ctx.arc(x/2.1, y/1.2, 5, 0, Math.PI * 2, false);
ctx.restore();
ctx.fill();
ctx.closePath();
}
//重复鼻子
function drawBiZi(ctx){
for(var n = 0; n < 5; n++){
ctx.beginPath();
ctx.strokeStyle = '#46BEEF';
ctx.bezierCurveTo(220, 173, 223, 164 + n, 247, 168);
ctx.stroke();
ctx.closePath();
}
}
//气泡,以下参数经过计算后得出
function drawPao(ctx, x, y, radius){
ctx.beginPath();
ctx.fillStyle = '#C9E8FB';
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
ctx.fill();
ctx.closePath();
//气泡内球
ctx.beginPath();
ctx.fillStyle = '#EBF3F7';
ctx.save();
ctx.scale(1.2, 1.8);
ctx.arc((x - (radius/2))/1.2, (y - (radius/4))/1.8, radius/7, 0, Math.PI * 2, false);
ctx.restore();
ctx.fill();
ctx.closePath();
//气泡内多边形
ctx.beginPath();
ctx.fillStyle = '#EBF3F7';
ctx.bezierCurveTo(x- radius/4, y+radius/2, x+radius/2.7, y+radius/2, x+radius/1.6, y+radius/4);
ctx.lineTo(x+radius/1.3, y+radius/2);
ctx.bezierCurveTo(x+radius/1.3, y+radius/2, x+radius/2.7, y+radius/1.3, x-radius/4, y+radius/1.3);
ctx.fill();
ctx.closePath();
}
function drawGo(ctx){
ctx.beginPath();
ctx.fillStyle = '#C9E8FB';
ctx.save();
ctx.scale(2, 1.5);
ctx.arc(355/2, 80/1.5, 20, 0, Math.PI * 2, false);
ctx.restore();
ctx.fill();
ctx.closePath();
//go尖
ctx.beginPath();
ctx.fillStyle = '#C9E8FB';
ctx.bezierCurveTo(305, 113, 320, 103, 325, 90);
ctx.bezierCurveTo(346, 107, 320, 103, 305, 113);
ctx.fill();
ctx.closePath();
}
function drawText(ctx, text, x, y, color){
ctx.beginPath();
ctx.fillStyle = color;
ctx.font = '36px arial,sans-serif';
ctx.fillText(text, x, y)
ctx.fill();
ctx.closePath();
}
function drawPolygon(ctx, data, color){
ctx.beginPath();
ctx.fillStyle = color;
for(var i = 0; i < data.length; i++){
if(i % 6 === 0){
ctx.bezierCurveTo(data[i], data[i+1], data[i+2], data[i+3], data[i+4], data[i+5]);
}
}
ctx.fill();
ctx.closePath();
}
var UU = function(canvas, scale){
this.canvas = canvas;
this.scale = scale;
this.ctx = canvas.getContext('2d');
}
UU.prototype.draw = function(){
this.ctx.scale(this.scale, this.scale);
var ctx = this.ctx;
var canvas = this.canvas;
var i = 0;
setInterval(function(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPolygon(ctx, body, '#86CFF8');
drawPolygon(ctx, dupi, COLOR_LIST.DU_PI);
drawPolygon(ctx, touquan, COLOR_LIST.TOU_QUAN);
drawZui(ctx);
drawJiuWo(ctx, 161, 211);
drawJiuWo(ctx, 300, 174);
drawBiZi(ctx);
drawGo(ctx);
drawText(ctx, 'go...', 320, 85, '#fff');
if(i % 2 === 0){
drawPolygon(ctx, weiba, COLOR_LIST.WEI_BA);
drawPolygon(ctx, chibang_1, COLOR_LIST.CHI_BANG_1);
drawPolygon(ctx, chibang_2, COLOR_LIST.CHI_BANG_2);
}else{
drawPolygon(ctx, weiba_new, COLOR_LIST.WEI_BA);
drawPolygon(ctx, chibang_1_new, COLOR_LIST.CHI_BANG_1);
drawPolygon(ctx, chibang_2_new, COLOR_LIST.CHI_BANG_2);
}
if(i % 4 === 0){
drawText(ctx, '>', 169 - 0, 180 + 5, '#099FDE');
drawText(ctx, '<', 283 - 16, 150 + 16, '#099FDE');
drawText(ctx, '‿', 169 + 10, 180 - 35, '#099FDE');
drawText(ctx, '‿', 283 - 55, 150 - 14, '#099FDE');
}else{
drawEye(ctx, 169, 180);
drawEye(ctx, 283, 150);
}
if(i % 2 === 0){
drawPao(ctx, 44, 270, 40);
drawPao(ctx, 331, 420, 25);
drawPao(ctx, 91, 405, 12);
drawPao(ctx, 124, 427, 11);
drawPao(ctx, 279, 446, 10);
drawPao(ctx, 356, 369, 12);
drawPao(ctx, 413, 270, 18);
}else{
drawPao(ctx, 44, 270 + 10, 40);
drawPao(ctx, 331, 420 + 10, 25);
drawPao(ctx, 91, 405 + 10, 12);
drawPao(ctx, 124, 427 + 10, 11);
drawPao(ctx, 279, 446 + 10, 10);
drawPao(ctx, 356, 369 + 10, 12);
drawPao(ctx, 413, 270 + 10, 18);
}
i++;
}, 380);
};
exports.UU = UU;
})(window);
ctrip/util.js → ctrip/js/util.js
View File
ctrip/mobile.html
+16
View File
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui" />
<title>游游矢量化</title>
</head>
<body>
<canvas width="470" height="470"></canvas>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/canvas_2.js" ></script>
<script type="text/javascript">
new UU(document.getElementsByTagName('canvas')[0], .25).draw();
</script>
</body>
</html>