svg画大白

最新推荐文章于 2024-04-22 05:04:56 发布

tomorrow_be_good

最新推荐文章于 2024-04-22 05:04:56 发布

阅读量837

点赞数

分类专栏： web 文章标签： javascript

本文链接：https://blog.csdn.net/sandstom_1985/article/details/48114007

版权

web 专栏收录该内容

14 篇文章

订阅专栏

效果图

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 hand
var 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);

// nose
c = 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 hand
c = 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
});
// body
c = 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
});