|
HTML代码： <!doctype html> <html> <head> <meta charset="utf-8"> <link href="style/style.css" rel="stylesheet" type="text/css"> <title></title> </head> <body> <script src="js/jquery.js"></script> <canvas id="phoenix" width="460" height="450"></canvas> <script src="js/js.js" type="text/javascript"></script> </body> </html>
JS 代码：
$(function() { var ctx = document.getElementById("phoenix").getContext("2d"); var globalGradient = ctx.createLinearGradient(196, 279, 275, 207); globalGradient.addColorStop(0, "#d34700"); globalGradient.addColorStop(.8, "#fdc000"); drawBody(); drawLeftWing(); drawLeftWingDetails(); drawRightWing(); drawRightWingDetails(); drawTheAss(); // let the party start ------------------------------------------------------------ // -------------------------------------------------------------------------------- function drawBody() { var bg = ctx.createLinearGradient(275, 207, 196, 279); bg.addColorStop(0, "#fdc000"); bg.addColorStop(.20, "#fc4e19"); bg.addColorStop(.50, "#fdc000"); ctx.beginPath(); ctx.fillStyle = bg; // ass of the phoenix ctx.bezierCurveTo(196, 279, 202, 274, 201, 267); ctx.bezierCurveTo(199, 260, 201, 246, 208, 235); ctx.bezierCurveTo(215, 227, 217, 226, 220, 221); ctx.bezierCurveTo(223, 218, 227, 219, 234, 213); ctx.bezierCurveTo(249, 200, 263, 195, 270, 202); ctx.bezierCurveTo(277, 201, 277, 201, 284, 207); // head ctx.lineTo(275, 207); ctx.lineTo(280, 210); ctx.bezierCurveTo(280, 210, 279, 213, 270, 210); ctx.bezierCurveTo(259, 216, 251, 224, 247, 231); ctx.bezierCurveTo(245, 234, 246, 238, 246, 238); ctx.bezierCurveTo(246, 238, 237, 247, 235, 253); ctx.bezierCurveTo(232, 261, 213, 288, 196, 279); ctx.fill(); } function drawLeftWing() { // left wing var bg = ctx.createLinearGradient(248, 240, 234, 254); bg.addColorStop(1, "#fdc000"); ctx.beginPath(); ctx.fillStyle = bg; ctx.bezierCurveTo(248, 240, 277, 260, 285, 238); ctx.bezierCurveTo(286, 231, 285, 227, 285, 227); ctx.bezierCurveTo(281, 202, 360, 228, 366, 250); ctx.bezierCurveTo(367, 261, 355, 270, 337, 279); ctx.bezierCurveTo(323, 284, 280, 288, 265, 277); ctx.bezierCurveTo(252, 271, 242, 266, 234, 254); ctx.bezierCurveTo(234, 254, 240, 241, 246, 239); ctx.fill(); } function drawRightWing() { // right wing var bg = ctx.createLinearGradient(248, 240, 234, 254); bg.addColorStop(1, "#fdc000"); ctx.beginPath(); ctx.fillStyle = bg; ctx.bezierCurveTo(219, 220, 201, 200, 207, 188); ctx.bezierCurveTo(214, 175, 227, 179, 231, 179); ctx.bezierCurveTo(235, 179, 244, 169, 234, 156); ctx.bezierCurveTo(218, 136, 204, 109, 203, 102); ctx.bezierCurveTo(201, 94, 174, 107, 174, 145); ctx.bezierCurveTo(175, 163, 174, 186, 190, 200); ctx.bezierCurveTo(197, 219, 208, 235, 208, 239); ctx.bezierCurveTo(208, 239, 212, 229, 220, 223); ctx.fill(); } function drawLeftWingDetails() { drawFeather(182, 18, 204, 104, 198, 104, 190, 58, 188, 66, 192, 94, 172, 54); drawFeather(160, 4, 198, 106, 190, 106, 174, 42, 184, 88, 172, 80, 158, 44); drawFeather(144, 32, 198, 110, 192, 120, 144, 32, 168, 80, 170, 86, 148, 60); drawFeather(118, 30, 189, 112, 185, 116, 142, 55, 179, 97, 152, 82, 136, 71); drawFeather(153, 30, 158, 54, 153, 46, 157, 47, 155, 49, 154, 42, 152, 24); drawFeather(134, 62, 184, 122, 179, 129, 150, 89, 174, 114, 138, 92, 136, 75); drawFeather(124, 57, 186, 116, 179, 122, 136, 80, 181, 113, 148, 108, 128, 69); drawFeather(118, 98, 177, 132, 175, 139, 148, 114, 168, 128, 162, 138, 135, 117); drawFeather(139, 95, 179, 129, 172, 134, 151, 108, 168, 123, 148, 119, 137, 96); drawFeather(123, 117, 177, 141, 176, 146, 153, 136, 167, 138, 162, 148, 119, 123); drawFeather(131, 128, 179, 151, 178, 159, 144, 140, 169, 148, 136, 144, 133, 134); drawFeather(152, 156, 180, 159, 178, 167, 161, 153, 176, 154, 177, 164, 164, 159); drawFeather(113, 159, 179, 178, 178, 185, 128, 164, 161, 179, 166, 185, 122, 175); drawFeather(128, 144, 181, 176, 178, 181, 142, 155, 177, 174, 173, 182, 140, 168); drawFeather(156, 153, 181, 180, 192, 190, 162, 163, 169, 175, 173, 187, 158, 177); drawFeather(119, 170, 187, 194, 192, 201, 141, 180, 172, 192, 180, 203, 129, 186); drawFeather(148, 147, 179, 194, 161, 193, 156, 180, 167, 189, 157, 190, 152, 184); drawFeather(145, 193, 192, 204, 202, 212, 145, 193, 186, 205, 171, 211, 158, 204); drawFeather(149, 190, 200, 213, 200, 223, 172, 208, 191, 213, 177, 222, 159, 201); drawFeather(172, 222, 201, 221, 204, 228, 184, 225, 198, 222, 189, 232, 171, 227); drawFeather(175, 237, 205, 228, 206, 235, 175, 237, 177, 229, 198, 231, 207, 240); drawFeather(189, 242, 207, 233, 209, 239, 196, 240, 205, 235, 198, 245, 192, 244); } function drawRightWingDetails() { drawFeather(454, 281, 342, 250, 362, 243, 443, 285, 396, 292, 393, 273, 420, 279); drawFeather(435, 286, 363, 259, 366, 249, 399, 291, 374, 273, 372, 260, 398, 279); drawFeather(450, 295, 345, 270, 353, 260, 448, 297, 430, 313, 368, 272, 409, 296); drawFeather(438, 310, 345, 249, 361, 252, 434, 315, 371, 290, 365, 263, 427, 306); drawFeather(450, 316, 344, 270, 350, 263, 447, 321, 405, 320, 355, 267, 373, 292); drawFeather(407, 300, 348, 270, 354, 261, 394, 301, 375, 301, 359, 271, 387, 296); drawFeather(378, 301, 340, 276, 344, 270, 373, 304, 340, 288, 346, 275, 352, 286); drawFeather(376, 320, 333, 276, 339, 272, 372, 318, 352, 306, 346, 286, 365, 306); drawFeather(355, 317, 324, 273, 329, 273, 350, 317, 329, 296, 330, 273, 333, 292); drawFeather(358, 321, 314, 275, 318, 271, 342, 316, 318, 295, 319, 271, 333, 301); drawFeather(318, 300, 304, 277, 314, 276, 314, 283, 309, 276, 317, 274, 319, 290); drawFeather(320, 296, 292, 282, 298, 276, 313, 293, 306, 291, 298, 273, 304, 283); drawFeather(333, 319, 290, 278, 298, 274, 324, 318, 300, 296, 300, 283, 324, 311); drawFeather(337, 334, 284, 283, 289, 280, 331, 334, 310, 327, 289, 280, 315, 322); drawFeather(307, 299, 267, 278, 282, 281, 302, 300, 292, 302, 283, 286, 297, 296); drawFeather(315, 332, 265, 275, 278, 282, 297, 320, 284, 307, 278, 282, 304, 319); drawFeather(276, 313, 251, 266, 262, 268, 272, 290, 251, 266, 271, 278, 278, 304); drawFeather(253, 287, 242, 261, 249, 266, 249, 283, 240, 276, 248, 266, 250, 279); drawFeather(236, 286, 235, 253, 243, 261, 240, 275, 231, 267, 244, 272, 239, 281); } function drawTheAss() { drawFeather(243, 308, 218, 272, 222, 271, 238, 311, 222, 296, 221, 271, 227, 296); drawFeather(236, 309, 218, 271, 223, 269, 236, 309, 223, 304, 222, 269, 225, 296); drawFeather(248, 373, 206, 277, 215, 274, 209, 323, 216, 290, 218, 295, 247, 359); drawFeather(269, 349, 211, 274, 218, 271, 250, 347, 214, 317, 218, 271, 224, 314); drawFeather(213, 325, 205, 279, 212, 275, 207, 314, 201, 300, 209, 288, 209, 302); drawFeather(203, 374, 197, 278, 207, 280, 189, 361, 196, 278, 200, 289, 204, 360); drawFeather(199, 328, 200, 278, 206, 278, 194, 313, 200, 278, 202, 285, 199, 328); drawFeather(189, 318, 201, 277, 205, 279, 185, 302, 201, 277, 200, 283, 192, 307); drawFeather(177, 314, 199, 274, 203, 280, 178, 301, 199, 274, 200, 281, 185, 303); drawFeather(144, 312, 196, 276, 199, 281, 166, 306, 195, 276, 196, 285, 161, 313); drawFeather(157, 297, 200, 273, 201, 278, 166, 285, 182, 280, 201, 278, 164, 291); drawFeather(152, 277, 200, 269, 201, 274, 152, 277, 193, 275, 201, 275, 177, 285); drawFeather(157, 263, 202, 262, 201, 268, 177, 266, 202, 262, 192, 274, 161, 270); drawFeather(125, 287, 202, 267, 202, 276, 151, 286, 201, 267, 138, 297, 125, 287); } // helper function for all feathers function drawFeather(pt1x, pt1y, pt2x, pt2y, pt3x, pt3y, bez1pt1x, bez1pt1y, bez2pt1x, bez2pt1y, bez1pt2x, bez1pt2y, bez2pt2x, bez2pt2y) { var gradient = ctx.createLinearGradient(pt1x, pt1y, pt2x, pt2y); ctx.beginPath(); ctx.moveTo(pt1x, pt1y); ctx.bezierCurveTo(bez1pt1x, bez1pt1y, bez2pt1x, bez2pt1y, pt2x, pt2y); ctx.lineTo(pt3x, pt3y); ctx.bezierCurveTo(bez1pt2x, bez1pt2y, bez2pt2x, bez2pt2y, pt1x, pt1y); ctx.shadowBlur = 0; gradient.addColorStop(0, "#d34700"); gradient.addColorStop(0.8, "#fdc000"); ctx.fillStyle = gradient; ctx.fill(); } });
|