svg画大白

来源：互联网发布：淘宝淘金币大转盘规律编辑：程序博客网时间：2024/06/02 08:37

效果图

index.html

<!DOCTYPE html><html lang="en"><head>    <title>untitled</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta charset="utf-8" />    <meta http-equiv="content-type" content="text/html;charset=utf-8" />    <meta name="viewport" content="width=device-width,initial-scale=1" />    <meta name="generator" content="Geany 1.23.1" /></head><body>    <div id="output"></div>    <script type+'text/javascript' src="raphael.js"></script>    <script type="text/javascript" src="app.js"></script></body></html>

app.js

var paper = Raphael(document.getElementById('output'), 800, 800);//left handvar c = paper.path('M 74.94609,417.46053 C 67.91749,476.81182 -59.700493,336.78724 97.99542,131.42712');c.attr({        fill:'none',        'fill-rule':'evenodd',        'stroke':'#000000',        'stroke-width':'1.0925945px',        'stroke-linecap':'butt',        'stroke-linejoin':'miter',        'stroke-opacity':'1'});c = paper.path('m 236.30351,22.19397 c -49.57508,1.19468 -99.50126,25.25494 -130.00322,59.52119 -38.28073,43.00501 2.69553,61.0026 21.17779,69.36435 74.27209,33.60219 143.58723,36.40594 211.93371,1.81006 20.48657,-10.36997 47.22467,-27.41854 18.24156,-71.09228 C 324.3345,31.59017 267.56682,23.77289 236.30351,22.19397 Z');c.attr({        fill:'none',        'fill-opacity':'1',        stroke:'#000000',        'stroke-width':'1.14147401',        'stroke-opacity':'1'});var eyeStyle = {        'fill':'#000000',        'fill-opacity':'1',        'stroke':'#000000',        'stroke-width':'0.79915798',        'stroke-opacity':'1'};c = paper.ellipse(181.00568,93.359497,17.070984,15.656772);c.attr(eyeStyle);c = paper.ellipse(276.75,94.112213,17.070984,15.656772);c.attr(eyeStyle);var faceStyle = {    fill:'#ff5555',    'fill-opacity':1,    stroke:'none',    'stroke-width':'0.72767806',    'stroke-opacity':1};function animate(face) {    var ani1 = Raphael.animation({fill:'#FFD1D1'}, 2000, 'linear', function() {            face.animate(ani2);        })        .delay(1000);    var ani2 = Raphael.animation({fill:'#ff5555'}, 2000, 'linear', function() {            face.animate(ani1);        })        .delay(1000);    face.animate(ani1);}var leftFace = paper.ellipse(175.77924,121.86917,12.156976,5.7930155);leftFace.attr(faceStyle);animate(leftFace);rightFace = paper.ellipse(281.06128,120.75989,12.156976,5.7930155);rightFace.attr(faceStyle);animate(rightFace);// nosec = paper.path('m 197.50165,93.36605 c 25.06224,10.74556 39.40665,10.66903 62.67773,0.24977');c.attr({        fill:'none',        'fill-rule':'evenodd',        stroke:'#000000',        'stroke-width':5,        'stroke-linecap':'butt',        'stroke-linejoin':'miter',        'stroke-miterlimit':4,        'stroke-dasharray':'none',        'stroke-opacity':1});// right handc = paper.path('m 388.99116,417.58091 c 7.0286,59.35129 134.64658,-80.67329 -23.04933,-286.03341');c.attr({        fill:'none',        'fill-rule':'evenodd',        stroke:'#000000',        'stroke-width':'1.0925945px',        'stroke-linecap':'butt',        'stroke-linejoin':'miter',        'stroke-opacity':1});// bodyc = paper.path('M 377.93726,239.94266 C 472.42105,531.3643 263.28425,423.30319 231.84363,444.57627 200.40301,423.18281 -8.4838,531.24392 85.99999,239.82228');c.attr({    fill:'none',    'fill-rule':'evenodd',    stroke:'#000000',    'stroke-width':'0.93917829px',    'stroke-linecap':'butt',    'stroke-linejoin':'miter',    'stroke-opacity':1});

0 0