RaphaelJS实践--猫和老鼠矢量图展示
（目前发现一些文章被盗用的情况，我们将在每篇文章前面添加原文地址，本文源地址：http://www.cnblogs.com/idealer3d/p/tomAndJerryRaphaelVectorGraphics.html)
经过前面3个博文的介绍，这里我们尝试来做一些简单的图片，并添加一些效果。效果图：
由于本人美术天赋实在是惨绝人寰，这里就直接从百度搜了个素描图然后通过inkscape的图像轮廓工具把素描图的轮廓给转换成为了path。做法是导入图片--点击选中图片--Shift+Alt+B，点击确定、更新就可以了。然后我们导出svg文件，找到里面的path标签部分（svg文件格式就是xml格式，很好找到标签），复制出来就可以进行下面的操作了。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Raphael Test</title>
</head>
<body>
<div id="my-canvas"
style="width:140px;padding:0px;margin:0px;">
</div>
<!--some html doms-->
<!--some scripts-->
<script type="text/javascript" src="../js/lib/raphael.js">
</script>
<script type="text/javascript">
var paper = Raphael("my-canvas", 650, 650);
var text1 =
paper.text(530, 220, "Jerry:I will be bigger than you,Tom!");
var
text2 = paper.text(380, 200, "Tom:I will catch you!");
var jerry
= paper.path("M 491,399 C 490,399 490,397 490,395 C 490,394 490,391 488,388 C
485,382 483,381 475,385 C 472,387 470,387 469,387 C 469,386 467,386 466,386 C
465,386 464,385 464,384 C 463,382 465,380 467,380 C 468,380 471,378 473,376 C
476,373 476,371 477,368 C 477,366 477,363 478,360 C 480,355 478,349 475,345 L
472,343 L 474,340 C 476,337 476,337 475,335 C 474,334 473,332 473,331 C 473,330
473,329 472,329 C 471,329 472,328 472,328 C 473,327 474,327 473,327 C 472,327
471,326 471,326 C 471,324 473,325 475,327 C 477,329 480,330 480,328 C 480,327
480,327 479,327 C 478,328 478,327 480,324 C 480,323 481,322 482,322 C 482,322
483,321 484,321 C 485,321 485,321 486,321 C 487,321 487,320 487,318 C 487,317
487,315 487,314 C 488,314 488,312 488,309 C 487,303 493,292 497,293 C 500,293
500,297 497,306 C 493,315 492,320 496,320 C 497,320 499,320 501,321 L 504,323 L
505,318 C 507,311 508,312 507,319 C 505,325 505,326 506,325 C 507,325 507,326
507,327 C 507,329 507,330 506,330 C 506,330 505,329 505,328 C 505,327 505,327
504,327 C 504,327 503,326 503,325 C 503,324 497,321 494,321 C 490,321 487,322
487,324 C 487,325 487,325 487,324 C 485,322 482,324 482,326 C 482,328 482,329
481,329 C 480,330 480,335 482,335 C 482,335 482,334 482,333 C 482,332 482,330
484,329 C 485,327 486,327 487,328 C 489,330 489,330 487,332 C 486,333 486,334
486,335 C 486,335 486,336 485,336 C 481,336 480,336 480,337 C 480,337 481,338
482,337 C 482,337 483,338 484,339 C 485,339 487,341 489,343 C 490,344 491,345
491,345 C 491,345 488,343 486,341 C 483,339 481,338 481,338 C 481,339 483,341
485,344 C 486,347 488,350 487,350 C 487,351 485,348 483,344 C 479,336 477,336
480,344 C 481,346 481,348 480,348 C 479,349 479,351 481,351 C 483,351 483,353
481,357 C 480,358 481,359 483,358 C 487,358 489,362 488,370 C 488,374 487,377
487,378 C 485,380 485,382 489,387 C 491,390 492,392 492,395 C 492,397 492,399
492,398 C 492,397 493,397 494,397 C 495,397 496,396 496,395 C 496,394 496,392
496,390 C 496,389 497,386 498,384 C 500,382 500,380 500,376 C 500,371 500,370
498,368 L 495,366 L 498,364 C 500,363 500,362 499,361 C 498,359 496,358 495,358
C 493,357 493,357 495,356 C 501,354 504,352 507,347 C 508,345 509,343 509,343 C
509,344 511,344 515,344 C 519,344 521,344 523,346 C 525,347 526,350 527,352 L
528,355 L 528,350 C 528,344 524,340 516,338 C 510,336 509,335 509,330 C 508,328
510,330 511,333 C 511,334 512,335 513,336 C 517,336 525,340 527,342 C 531,349
530,360 525,365 C 522,367 515,369 511,368 C 506,367 502,369 502,372 C 502,374
502,375 503,374 C 506,373 512,372 511,373 C 511,374 509,375 506,376 C 503,378
502,379 501,382 C 500,384 499,386 498,387 C 498,387 497,390 497,392 C 497,399
497,398 494,400 C 492,400 491,400 491,399 z M 475,384 C 478,382 480,381 480,381
C 480,381 480,379 479,377 L 477,374 L 473,378 C 471,380 468,382 467,382 C
464,383 465,385 470,386 C 470,386 473,385 475,384 z M 503,368 C 504,367 500,365
499,365 C 498,366 498,366 499,367 C 500,369 502,369 503,368 z M 520,366 C
526,364 528,358 525,350 C 524,348 523,347 520,346 C 514,344 509,346 506,351 C
504,353 502,355 500,356 L 498,357 L 501,361 C 503,364 505,366 505,366 C 508,367
516,367 520,366 z M 481,353 C 480,352 479,352 479,352 C 479,353 480,354 480,354
C 481,354 481,355 481,354 C 482,354 481,353 481,353 z M 479,346 C 479,345
478,345 477,345 C 477,345 477,345 477,346 C 477,346 478,347 479,347 C 479,347
479,346 479,346 z M 477,341 C 477,340 477,340 476,340 C 476,341 475,341 475,342
C 475,342 476,343 476,343 C 477,343 477,342 477,341 z M 479,334 C 479,333
479,332 479,332 C 479,332 478,332 477,331 C 474,330 474,330 476,333 C 477,336
478,336 479,334 z M 486,331 C 487,330 487,330 485,330 C 484,330 483,331 483,332
C 482,333 484,333 486,331 z M 492,317 C 492,316 491,315 490,315 C 489,315
488,316 488,317 C 488,319 489,320 490,320 C 492,320 492,319 492,317 z M 494,307
C 500,295 497,290 491,301 C 489,305 489,313 491,313 C 491,313 493,310
494,307z");
var tom = paper.path("M 297,399 C 296,398 294,397
292,398 C 289,398 287,397 286,397 C 286,396 284,395 283,394 C 280,393 280,390
282,387 C 285,385 291,384 298,385 C 304,386 312,385 312,383 C 312,382 310,379
306,376 C 302,373 299,369 299,368 C 299,365 302,360 305,356 L 308,352 L 305,350
C 304,349 301,348 299,347 C 296,347 294,346 294,345 C 294,345 294,343 292,343 C
290,341 290,340 292,337 C 294,336 296,336 301,336 C 304,336 308,337 308,337 C
310,337 310,336 311,330 C 312,319 313,311 316,305 C 319,299 328,288 332,286 L
335,284 L 331,284 C 322,282 320,281 319,278 C 317,272 320,267 329,261 C 338,256
339,254 336,252 C 334,251 334,251 335,248 C 336,246 336,246 336,244 C 334,243
335,240 337,240 C 338,240 340,240 341,241 C 344,243 345,243 346,241 C 346,240
347,238 348,238 C 351,237 351,236 351,232 C 352,228 353,225 356,225 C 358,225
359,227 359,229 C 359,231 356,235 355,235 C 353,235 350,240 350,243 C 350,244
351,245 352,246 C 355,250 354,255 350,258 C 349,259 347,261 346,261 C 346,261
345,262 344,264 C 342,267 342,267 345,267 C 346,267 350,265 353,264 C 356,262
360,261 361,261 C 362,261 363,260 363,260 C 363,259 364,259 365,259 C 367,259
367,258 367,254 C 367,251 368,247 368,245 C 371,240 369,231 365,230 C 364,230
363,229 363,229 C 363,226 385,230 393,233 C 399,237 401,236 403,229 C 403,224
404,221 403,218 C 402,216 402,214 402,214 C 402,214 405,215 408,216 C 417,221
421,228 421,237 C 421,240 422,241 424,241 C 429,242 430,244 425,243 C 422,243
421,243 421,244 C 421,246 423,247 425,249 C 431,251 431,253 426,251 C 421,248
420,250 423,253 C 424,256 425,258 424,264 C 424,271 424,273 425,273 C 427,273
427,273 427,278 C 427,280 427,280 431,281 L 436,281 L 431,282 C 428,282 425,282
425,283 C 425,283 422,284 420,284 C 417,285 415,285 414,286 C 413,286 412,286
411,286 C 409,286 408,286 408,287 C 408,287 407,288 406,288 C 404,288 402,288
401,289 C 400,289 397,290 396,290 C 394,290 393,290 393,294 C 393,297 392,300
389,307 C 386,312 382,320 381,324 C 379,329 378,331 375,332 C 371,335 368,334
367,331 C 367,329 366,328 365,328 C 364,329 361,338 362,342 C 362,346 362,346
365,347 C 371,348 375,346 383,339 C 392,331 402,326 411,325 C 416,325 418,325
420,326 C 423,328 421,330 414,331 C 404,334 398,339 391,350 C 389,354 385,359
383,361 C 376,369 367,371 357,366 C 353,364 351,363 350,364 C 349,365 346,365
343,364 C 338,364 337,364 334,367 C 329,370 325,375 325,378 C 325,380 327,383
328,385 C 332,390 332,392 330,395 C 329,396 327,397 321,397 C 317,397 311,397
307,398 C 299,400 298,400 297,399 z M 306,397 C 309,396 315,395 319,395 C
326,395 328,395 329,393 C 331,390 325,382 322,384 C 322,384 321,384 320,383 C
320,382 319,382 319,382 C 317,385 311,386 299,386 C 289,386 287,387 284,388 C
281,390 281,391 283,393 C 284,393 286,393 288,391 C 292,388 294,389 290,392 C
286,395 287,396 291,396 C 295,396 296,395 297,393 C 298,392 300,391 300,391 C
300,391 300,393 299,394 C 295,398 298,399 306,397 z M 320,380 C 320,380 322,381
323,381 C 324,382 324,381 324,380 C 323,377 326,371 331,367 C 334,365 336,363
335,363 C 335,362 334,361 332,360 L 329,358 L 326,361 C 322,366 319,366 313,360
C 311,356 308,355 308,355 C 306,356 301,365 301,368 C 301,370 303,372 308,376 C
315,382 317,383 318,381 C 318,379 319,379 320,380 z M 375,366 C 380,364 383,360
390,350 C 398,337 403,333 414,330 C 417,329 419,328 419,328 C 419,326 413,326
406,327 C 398,329 391,333 384,340 C 375,348 373,349 366,349 C 361,348 360,348
360,350 C 360,351 359,355 357,357 L 354,363 L 358,365 C 362,367 371,367 375,366
z M 326,359 C 329,356 329,354 329,352 C 328,351 328,350 328,349 C 328,348
328,348 327,348 C 326,348 325,347 325,347 C 325,346 325,345 323,345 C 322,345
320,344 319,343 C 314,340 299,336 296,337 C 292,339 291,342 295,341 C 296,341
299,340 300,340 L 304,340 L 301,341 C 294,342 294,346 300,346 C 304,346 305,347
311,355 C 316,361 319,364 320,364 C 322,364 324,362 326,359 z M 352,361 C
356,358 359,352 360,341 C 361,335 362,330 363,328 C 366,324 366,318 364,313 C
363,311 361,310 357,312 C 356,313 356,313 357,317 C 357,319 357,323 357,327 C
357,330 356,336 356,339 C 356,344 354,350 353,348 C 353,348 353,347 353,346 C
354,345 354,343 354,342 C 354,341 354,341 353,343 C 353,344 352,345 351,345 C
351,345 351,344 351,344 C 355,337 355,335 355,325 C 355,316 355,314 353,313 C
351,311 343,312 341,313 C 336,318 324,343 326,344 C 327,344 327,345 327,345 C
327,346 328,347 329,347 C 330,347 330,347 330,348 C 330,352 331,352 336,347 C
339,344 342,342 343,342 C 344,342 344,342 344,343 C 344,343 343,344 342,344 C
341,344 331,355 330,356 C 330,358 333,360 338,362 C 344,364 349,364 352,361 z M
326,338 C 330,329 338,314 341,312 C 342,311 342,309 339,306 C 336,304 336,302
339,302 C 340,302 341,301 341,299 C 342,297 346,295 348,296 C 348,296 352,297
355,297 C 359,297 361,297 363,299 C 364,300 366,300 368,300 C 370,300 372,300
374,303 C 376,305 377,307 377,307 C 376,307 375,306 373,304 C 372,302 370,302
367,302 L 364,302 L 364,306 C 364,308 365,311 366,312 C 367,313 367,316 367,320
C 367,328 369,331 371,332 C 373,333 379,327 380,322 C 381,320 384,314 386,308 C
392,298 393,292 392,290 C 391,289 390,289 387,292 C 384,294 382,296 382,295 C
382,295 384,293 386,292 C 387,290 388,288 388,288 C 387,287 381,292 379,296 C
376,300 375,301 375,298 C 375,296 382,288 386,287 C 388,286 389,285 390,284 C
390,281 390,281 390,284 C 390,286 391,286 395,284 C 396,283 399,282 399,282 C
400,282 399,283 397,284 C 394,285 392,287 392,287 C 392,289 397,289 400,287 C
402,287 404,286 405,286 C 406,287 406,287 406,286 C 406,285 408,285 410,285 C
414,285 415,282 412,280 C 410,278 412,276 415,277 C 418,277 418,278 416,281 C
416,282 416,283 417,283 C 419,283 422,280 422,278 C 422,277 423,277 423,277 C
424,278 424,279 424,280 C 423,281 423,281 424,281 C 424,280 425,279 425,277 C
425,276 425,275 424,276 C 423,276 422,276 423,275 C 423,274 423,274 422,274 C
422,274 422,274 422,275 C 422,276 422,277 421,278 C 419,279 419,279 420,278 C
420,276 420,276 419,276 C 416,276 415,274 416,268 C 416,261 417,258 420,257 C
422,256 422,255 421,253 C 420,252 418,251 417,251 C 413,251 413,249 415,248 C
417,247 416,247 413,246 C 409,246 409,245 410,245 C 412,244 412,244 409,243 C
408,242 407,241 407,241 C 407,240 407,240 406,240 C 403,240 404,238 408,237 C
411,236 411,236 406,236 C 402,236 400,236 400,237 C 399,239 399,239 397,237 C
393,234 386,232 378,230 C 370,229 365,229 372,230 C 378,232 390,237 392,239 C
396,243 397,245 394,245 C 393,245 391,245 390,245 C 388,246 387,245 386,245 C
386,244 385,244 385,245 C 385,247 384,248 383,249 C 380,251 380,250 382,248 C
383,247 385,245 385,243 C 386,240 387,240 388,243 C 388,244 388,244 388,243 C
388,242 390,242 391,242 C 394,243 394,243 391,240 C 387,237 372,231 370,231 C
370,232 370,234 371,236 C 372,239 372,241 370,245 C 368,252 368,257 370,257 C
372,258 375,256 374,254 C 373,252 374,252 375,252 C 377,252 377,251 377,250 C
377,249 378,247 379,246 C 380,245 380,245 380,246 C 380,247 380,248 379,248 C
379,249 378,250 378,251 C 378,252 378,253 377,253 C 376,253 375,254 375,255 C
375,256 371,260 369,260 C 369,260 368,260 367,260 C 366,262 368,264 370,264 C
371,264 371,264 371,265 C 371,266 372,266 373,267 C 376,267 376,269 374,269 C
374,269 375,270 378,272 C 382,274 386,275 389,275 C 392,276 396,276 398,276 C
399,277 401,276 401,276 C 402,275 398,271 395,269 C 392,268 392,268 394,268 C
397,268 402,273 402,275 C 402,276 403,277 404,277 C 406,277 406,277 406,278 C
406,278 405,278 404,278 C 403,278 401,278 399,279 C 396,281 390,281 388,279 C
386,278 386,277 390,279 C 393,280 398,279 398,278 C 398,277 394,277 389,277 C
384,277 379,277 379,277 C 379,276 380,276 381,276 C 383,276 380,274 376,272 C
373,271 371,269 371,268 C 371,267 371,267 370,267 C 369,267 368,266 368,266 C
368,266 367,264 365,264 C 362,262 362,262 354,265 C 350,267 345,268 344,268 C
341,268 340,269 338,271 C 337,272 336,273 336,273 C 336,272 337,270 339,268 C
341,266 343,263 344,262 C 345,260 346,259 347,259 C 349,259 352,254 352,251 C
352,250 352,248 351,247 C 350,246 350,244 349,242 C 349,241 349,240 348,240 C
347,241 346,245 347,246 C 348,247 348,249 347,252 C 347,254 347,256 347,255 C
347,255 346,254 344,254 C 342,253 338,254 339,255 C 339,256 336,259 332,261 C
323,267 321,269 320,273 C 319,278 322,281 328,282 C 331,282 335,283 335,283 C
338,283 349,275 355,269 C 358,266 360,265 359,267 C 359,268 359,269 361,269 C
362,269 363,270 364,271 C 365,273 365,274 370,274 C 374,274 375,274 377,277 C
380,281 380,283 377,288 C 375,292 368,299 366,299 C 365,299 366,298 367,297 C
376,290 380,284 377,279 C 374,276 370,274 367,275 C 363,276 362,276 362,273 C
362,269 358,269 353,273 C 351,275 345,279 340,283 C 327,291 320,299 316,310 C
315,315 311,337 312,337 C 313,338 323,343 324,343 C 324,343 325,341 326,338 z M
401,281 C 401,281 403,281 404,281 C 405,280 406,280 406,281 C 405,282 401,282
401,281 z M 405,275 C 403,274 403,273 406,274 C 407,274 408,274 407,273 C
407,272 407,271 408,270 C 411,268 411,263 409,258 C 409,256 409,256 410,256 C
411,256 411,258 411,265 C 411,274 411,274 409,275 C 407,275 406,276 406,276 C
406,276 405,275 405,275 z M 402,271 C 402,270 403,270 403,270 C 403,270 404,270
404,271 C 404,271 404,272 404,272 C 403,272 402,271 402,271 z M 403,266 C
404,260 406,256 407,256 C 407,256 407,257 406,259 C 405,260 404,263 404,265 C
404,266 404,268 403,268 C 403,269 403,268 403,266 z M 400,255 C 400,255 402,254
403,252 C 405,251 406,250 407,250 C 409,251 409,251 407,252 C 406,253 404,254
404,254 C 402,256 400,256 400,255 z M 413,255 C 413,255 414,255 415,255 C
415,255 415,256 414,256 C 413,256 412,256 413,255 z M 361,309 C 363,309 363,308
363,307 C 363,305 362,303 362,302 C 362,299 360,298 356,298 C 353,299 352,299
352,300 C 353,301 346,304 342,303 C 340,303 339,303 340,304 C 340,305 342,305
346,305 C 349,305 351,305 351,306 C 351,306 350,306 348,306 C 345,306 342,307
342,308 C 342,309 347,309 348,308 C 349,307 350,307 349,308 C 349,309 347,310
346,310 C 344,311 344,311 347,310 C 349,310 352,310 353,311 C 353,311 355,311
357,310 C 358,309 360,309 361,309 z M 349,301 C 350,301 349,300 347,300 C
345,300 344,301 345,301 C 345,301 346,302 347,302 C 348,302 349,301 349,301 z M
423,264 C 423,259 423,258 421,258 C 419,258 418,260 417,265 C 416,269 416,270
418,270 C 420,271 420,272 420,272 C 421,276 422,269 423,264 z M 340,252 C
340,251 337,249 336,249 C 335,249 336,250 337,251 C 339,253 340,253 340,252 z M
345,251 C 347,248 345,245 341,243 C 337,240 336,240 336,242 C 336,243 338,244
339,245 C 341,246 342,248 342,249 C 342,251 343,253 344,253 C 344,253 345,252
345,251 z M 341,248 C 341,247 340,247 339,247 C 337,247 337,247 339,248 C
341,250 342,250 341,248 z M 420,244 C 420,242 420,242 416,242 L 411,242 L
414,244 C 419,246 420,246 420,244 z M 420,237 C 420,234 419,228 418,227 C
417,227 416,225 414,223 C 413,221 410,219 408,218 L 404,216 L 404,223 C 404,226
404,230 403,232 C 403,234 403,234 408,234 C 416,234 416,235 414,236 C 413,237
411,238 410,238 C 408,238 414,239 418,240 C 420,240 420,239 420,237 z M 356,229
C 356,228 355,227 354,229 C 353,230 354,232 356,231 C 356,231 356,230 356,229
z");
jerry.animate({
"fill": "black",
"transform": "s2"
}, 3000, "bounce", function(){
text2.remove();
paper.text(530, 220,
"Jerry:Hahah,catch you will i,maybe!");
});
tom.animate({
"fill": "black",
"transform": "s0.5"
}, 3000, "bounce", function(){
text1.remove();
paper.text(380, 200, "Tom:What the hell
is going on?");
});
</script>
</body>
</html>
后面我们有个动画效果，实际上是个伪动画啦，因为里面的图像并不动，只是渐变上色、变大和转一圈。我接下来会尝试去看看能不能定位其中的path命令来做一些真正意义上的动画效果。（半小时后）我修改了一下代码，就不再贴了，直接把上面那个代码给覆盖了。现在动画效果还可以哟，大家复制代码试一试！效果图奉上：
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
