{"id":2441,"date":"2022-05-25T15:26:24","date_gmt":"2022-05-25T07:26:24","guid":{"rendered":"http:\/\/nick.txtcc.com\/?p=2441"},"modified":"2022-05-25T15:27:26","modified_gmt":"2022-05-25T07:27:26","slug":"raphaeljs%e5%9f%ba%e7%a1%80%e6%93%8d%e4%bd%9c","status":"publish","type":"post","link":"http:\/\/nick.txtcc.com\/index.php\/other\/2441","title":{"rendered":"RaphaelJS\u57fa\u7840\u64cd\u4f5c"},"content":{"rendered":"
\n\n\u524d\u7aef\u7ed8\u56fe\u7528\u7684\u6700\u591a\u7684\u5c31\u662fsvg\u548ccanvas\uff0c\u73b0\u5728\u6709\u8bb8\u591a\u57fa\u4e8e\u8fd9\u4e24\u79cd\u6280\u672f\u7684\u56fe\u5f62\u6846\u67b6\uff0c\u6bd4\u5982\u57fa\u4e8esvg\u7684D3 \u548c\u57fa\u4e8ecanvas\u7684echarts \u3002\u4eca\u5929\u8981\u8bb2\u7684\u662f\u57fa\u4e8esvg\u7684Raphael Javascript \uff0c\u5b83\u662f\u4e00\u4e2a Javascript\u7684\u77e2\u91cf\u5e93\u3002\n
\u9996\u5148\u4f60\u8981\u5728HTML\u4e2d\u5f15\u5165RaphaelJS<\/blockquote>\n
\n
\n
<\/div>\n
<\/div>\n<\/div>\n
image.png<\/div>\n<\/div>\n
\u7136\u540e\u4f60\u5c31\u53ef\u4ee5\u5728js\u4e2d\u4f7f\u7528\u8fd9\u4e2a\u5305\u4e86<\/blockquote>\n\u6211\u662f\u5148\u5efa\u4e86\u4e00\u4e2a\u540d\u4e3amaster.js\u7684\u6587\u4ef6\uff0c\u5728\u8fd9\u4e2a\u6587\u4ef6\u4e2d\u5199js\uff0c\u6ce8\u610f\u4e24\u4e2a\u6587\u4ef6\u7684\u653e\u7f6e\u987a\u5e8f\uff0c\u7531\u4e8e\u8981\u5728master.js\u4e2d\u4f7f\u7528RaphaelJS\uff0c\u6240\u4ee5raphael.js\u7684\u5f15\u7528\u8981\u653e\u5728\u524d\u9762\n
\u521b\u5efa\u753b\u5e03<\/blockquote>\n

1.\u4ee5\u5750\u6807\u70b9\u5b9a\u4e49\u753b\u5e03\u4f4d\u7f6e<\/h2>\nvar paper = Raphael(20, 30, 650, 400); \u5206\u522b\u4e3a\u6a2a\u5750\u6807\uff0c\u7eb5\u5750\u6807\uff0c\u5bbd\u5ea6\uff0c\u9ad8\u5ea6<\/code>\n

2.\u4ee5\u8282\u70b9\u5b9a\u4e49\u753b\u5e03\u4f4d\u7f6e<\/h2>\n
\n\n\u00a0\n
<span class="token keyword">var<\/span> width <span class="token operator">=<\/span> <span class="token number">600<\/span>\n<span class="token punctuation">;<\/span>\n<span class="token keyword">var<\/span> height <span class="token operator">=<\/span> <span class="token number">200<\/span>\n<span class="token punctuation">;<\/span>\n<span class="token keyword">var<\/span> paper <span class="token operator">=<\/span> <span class="token function">Raphael<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token string">"mySvg"<\/span>\n<span class="token punctuation">,<\/span>width<span class="token punctuation">,<\/span>height<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>   <span class="token comment">\/\/\u5b9a\u4e49svg\u7ed8\u56fe\u8282\u70b9\uff0c\u53ca\u5bbd\u5ea6\uff0c\u9ad8\u5ea6 <\/span>\n<\/code><\/pre>\n<\/div>\n
\u5c01\u88c5\u7ed8\u56fe\u51fd\u6570<\/blockquote>\n
1.\u753b\u77e9\u5f62<\/h5>\n
\n\n\u00a0\n
<span class="token keyword">function<\/span> <span class="token function">drawRect<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token parameter">x<span class="token punctuation">,<\/span>y<span class="token punctuation">,<\/span>w<span class="token punctuation">,<\/span>h<span class="token punctuation">,<\/span>radius<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">{<\/span>\n    <span class="token keyword">var<\/span> rect <span class="token operator">=<\/span> paper<span class="token punctuation">.<\/span>\n<span class="token function">rect<\/span>\n<span class="token punctuation">(<\/span>x<span class="token punctuation">,<\/span>y<span class="token punctuation">,<\/span>w<span class="token punctuation">,<\/span>h<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>     <span class="token comment">\/\/\u82e5\u7ed8\u5706\u89d2\u77e9\u5f62\u52a0\u4e0a\u5706\u89d2\u53c2\u6570(\u6a2a\u5750\u6807\uff0c\u7eb5\u5750\u6807\uff0c\u5bbd\uff0c\u9ad8\uff0c\u5706\u89d2)<\/span>\n    rect<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token punctuation">{<\/span>\n        <span class="token string">"fill"<\/span>\n<span class="token punctuation">:<\/span> <span class="token string">"red"<\/span>\n<span class="token punctuation">,<\/span>             <span class="token comment">\/\/\u586b\u5145\u989c\u8272<\/span>\n        <span class="token string">"stroke"<\/span>\n<span class="token punctuation">:<\/span> <span class="token string">"lime"<\/span>\n<span class="token punctuation">,<\/span>     <span class="token comment">\/\/\u8fb9\u6846\u989c\u8272<\/span>\n        <span class="token string">"stroke-width"<\/span>\n<span class="token punctuation">:<\/span> <span class="token number">2<\/span>   <span class="token comment">\/\/ \u8fb9\u6846\u5bbd\u5ea6<\/span>\n    <span class="token punctuation">}<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n<span class="token punctuation">}<\/span>\n<\/code><\/pre>\n<\/div>\n
2.\u753b\u5706<\/h4>\n
\n\n\u00a0\n
<span class="token keyword">function<\/span> <span class="token function">drawCircle<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token parameter">x<span class="token punctuation">,<\/span>y<span class="token punctuation">,<\/span>r<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">{<\/span>\n    <span class="token keyword">var<\/span> cir <span class="token operator">=<\/span> paper<span class="token punctuation">.<\/span>\n<span class="token function">circle<\/span>\n<span class="token punctuation">(<\/span>x<span class="token punctuation">,<\/span>y<span class="token punctuation">,<\/span>r<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>        <span class="token comment">\/\/(\u5706\u5fc3\u6a2a\u5750\u6807\uff0c\u5706\u5fc3\u7eb5\u5750\u6807\uff0c\u534a\u5f84)<\/span>\n    cir<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token punctuation">{<\/span>\n        <span class="token string">"fill"<\/span>\n<span class="token punctuation">:<\/span> <span class="token string">"blue"<\/span>\n<span class="token punctuation">,<\/span>\n        <span class="token string">"stroke"<\/span>\n<span class="token punctuation">:<\/span> <span class="token string">"lime"<\/span>\n<span class="token punctuation">,<\/span>\n        <span class="token string">"stroke-width"<\/span>\n<span class="token punctuation">:<\/span> <span class="token number">2<\/span>\n    <span class="token punctuation">}<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">}<\/span>\n<\/code><\/pre>\n<\/div>\n
3.\u753b\u692d\u5706<\/h4>\n
\n\n\u00a0\n
<span class="token keyword">function<\/span> <span class="token function">drawEllipse<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token parameter">x<span class="token punctuation">,<\/span>y<span class="token punctuation">,<\/span>rx<span class="token punctuation">,<\/span>ry<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">{<\/span>    <span class="token comment">\/\/\u6c34\u5e73\u534a\u5f84\u548c\u5782\u76f4\u534a\u5f84\u5176\u5b9e\u5c31\u662f\u692d\u5706\u7684rx\u548cry<\/span>\n    <span class="token keyword">var<\/span> ellipse <span class="token operator">=<\/span> paper<span class="token punctuation">.<\/span>\n<span class="token function">ellipse<\/span>\n<span class="token punctuation">(<\/span>x<span class="token punctuation">,<\/span>y<span class="token punctuation">,<\/span>rx<span class="token punctuation">,<\/span>ry<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n    ellipse<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token punctuation">{<\/span>\n        <span class="token string">"fill"<\/span>\n<span class="token punctuation">:<\/span> <span class="token string">"yellow"<\/span>\n<span class="token punctuation">,<\/span>\n        <span class="token string">"stroke"<\/span>\n<span class="token punctuation">:<\/span> <span class="token string">"lime"<\/span>\n<span class="token punctuation">,<\/span>\n        <span class="token string">"stroke-width"<\/span>\n<span class="token punctuation">:<\/span> <span class="token number">2<\/span>\n    <span class="token punctuation">}<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">}<\/span>\n<\/code><\/pre>\n<\/div>\n
4.\u753b\u4e0a\u4e94\u8fb9\u5f62<\/h4>\n
\n\n\u00a0\n
function drawDownFive(x,y,w,h){   \/\/ \u4f20\u8d77\u70b9\u5750\u6807\uff0c\u5bbd\u548c\u9ad8\n    \/\/ \u82e5\u8981\u4f7f\u8fb9\u6846\u5b8c\u6574\uff0c\u4ece\u8d77\u59cb\u5750\u6807\u5230\u8d77\u59cb\u5750\u6807\uff0c\u4ec5\u586b\u5145\u7684\u8bdd\u4e0d\u9700\u5728\u540e\u9762\u52a0\u8d77\u59cb\u5750\u6807\u6216\u52a0\u95ed\u5408\u8def\u5f84\n    \/\/ var DownFive = paper.path('M'+x+','+y+'H'+(w+x)+'V'+(h+y)+'L'+(w\/2+x)+','+(h+h\/2+y)\n    \/\/ +'L'+x+','+(y+h)+'L'+x+','+y);\n    \/\/ var DownFive = paper.path('M'+x+','+y+'H'+(w+x)+'V'+(h+y)+'L'+(w\/2+x)+','+(h+h\/2+y)\n    \/\/ +'L'+x+','+(y+h)+'Z');\n    var DownFive = paper.path('m'+x+','+y+'h'+w+'v'+h+'l'+(-w\/2)+','+(h\/2)+'l'+(-w\/2)+','+(-h\/2)+'Z');\/\/\u76f8\u5bf9\u5750\u6807\n    DownFive.attr({\n        "fill": 'orangered',\n        "stroke": 'lime',\n        "stroke-width": 2\n    });\n}\n<\/code><\/pre>\n<\/div>\n
5.\u6dfb\u52a0\u6587\u5b57<\/h4>\n
\n\n\u00a0\n
<span class="token keyword">function<\/span> <span class="token function">drawText<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token parameter">x<span class="token punctuation">,<\/span>y<span class="token punctuation">,<\/span>txt<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">{<\/span>   <span class="token comment">\/\/  \u6a2a\u5750\u6807+\u7eb5\u5750\u6807+\u6587\u672c<\/span>\n    <span class="token keyword">var<\/span> tip <span class="token operator">=<\/span> paper<span class="token punctuation">.<\/span>\n<span class="token function">text<\/span>\n<span class="token punctuation">(<\/span>x<span class="token punctuation">,<\/span>y<span class="token punctuation">,<\/span>txt<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n    tip<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token punctuation">{<\/span>\n        <span class="token string">"font-size"<\/span>\n<span class="token punctuation">:<\/span> <span class="token number">16<\/span>\n<span class="token punctuation">,<\/span>    <span class="token comment">\/\/\u5b57\u4f53\u5927\u5c0f<\/span>\n        <span class="token string">"fill"<\/span>\n<span class="token punctuation">:<\/span> <span class="token string">'brown'<\/span>\n<span class="token punctuation">,<\/span>     <span class="token comment">\/\/\u5b57\u4f53\u989c\u8272<\/span>\n        <span class="token string">"text-anchor"<\/span>\n<span class="token punctuation">:<\/span>\n<span class="token string">"middle"<\/span>\n<span class="token punctuation">,<\/span>  <span class="token comment">\/\/  \u5b57\u4f53\u5bf9\u9f50\u6837\u5f0f<\/span>\n    <span class="token punctuation">}<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n <span class="token punctuation">}<\/span>\n <span class="token function">drawText<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token number">200<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">140<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token string">"\u692d\u5706\u5f27\u7684\u4f7f\u7528"<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n<\/code><\/pre>\n<\/div>\n
Raphael\u5143\u7d20\u7684\u53d8\u6362<\/blockquote>\n\/\/ T \u5e73\u79fb\n\n\/\/ S \u7f29\u653e Sx,y \u6a2a\u5411\u7f29\u653ex\u500d,\u7eb5\u5411\u7f29\u653ey\u500d\n\n\/\/ R \u6309\u89d2\u5ea6\u65cb\u8f6c\n\n\/\/ M \u53d8\u6362\u77e9\u9635\n\/\/ \u6bcf\u4e2a\u5b57\u6bcd\u662f\u4e00\u4e2a\u547d\u4ee4 t\u662f\u5e73\u79fb\uff0cr\u662f\u65cb\u8f6c\uff0cs\u662f\u7f29\u653e\uff0cm\u662f\u77e9\u9635\n\/\/ \u4e5f\u6709\u53e6\u7c7b\u7684\u201c\u7edd\u5bf9\u201d\u5e73\u79fb\u3001\u65cb\u8f6c\u548c\u7f29\u653e\uff1aT\u3001R\u548cS\u3002\u4ed6\u4eec\u4e0d\u4f1a\u8003\u8651\u5230\u4ee5\u524d\u7684\u53d8\u6362\n
\n\n\u00a0\n
<span class="token keyword">var<\/span> rect1 <span class="token operator">=<\/span> paper<span class="token punctuation">.<\/span>\n<span class="token function">rect<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token number">20<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">300<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">100<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">50<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n rect1<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token punctuation">{<\/span>\n    <span class="token string">"transform"<\/span>\n<span class="token punctuation">:<\/span> <span class="token string">'r90T100,0s0.5'<\/span>\n <span class="token punctuation">}<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n<\/code><\/pre>\n<\/div>\n
Raphael\u56fe\u5f62\u7684\u52a8\u753b\u6548\u679c<\/blockquote>\n\/\/ \u8bed\u6cd5\u5982\u4e0b\uff1aElement.animate({\u52a8\u753b\u5c5e\u6027\u7684\u952e\u503c\u5bf9},\u52a8\u753b\u65f6\u95f4,\u7f13\u52a8\u7c7b\u578b,\u56de\u8c03\u51fd\u6570);\n\/\/ \u7f13\u52a8\u7c7b\u578b\u5176\u5b9e\u5c31\u662f\u52a8\u753b\u8fc7\u6e21\u516c\u5f0f\uff0c\u662f\u54ea\u79cd\u7c7b\u578b\u7684\u3002\u4e3b\u8981\u6709\u4ee5\u4e0b\u8fd9\u4e9b\u7c7b\u578b\uff1a\n\n\/\/ \u201clinear\u201d\uff08\u7ebf\u6027\uff09\n\/\/ \u201c<\u201d\u6216\u201ceaseIn\u201d\u6216\u201cease-in\u201d \uff08\u7531\u6162\u5230\u5feb\uff09\n\/\/ \u201c>\u201d\u6216\u201ceaseOut\u201d\u6216\u201cease-out\u201d\uff08\u53c8\u5feb\u5230\u6162\uff09\n\/\/ \u201c<>\u201d\u6216\u201ceaseInOut\u201d\u6216\u201cease-in-out\u201d\uff08\u7531\u6162\u5230\u5feb\u518d\u5230\u6162\uff09\n\/\/ \u201cbackIn\u201d\u6216\u201cback-in\u201d\uff08\u5f00\u59cb\u65f6\u56de\u5f39\uff09\n\/\/ \u201cbackOut\u201d\u6216\u201cback-out\u201d\uff08\u7ed3\u675f\u65f6\u56de\u5f39\uff09\n\/\/ \u201celastic\u201d\uff08\u6a61\u76ae\u7b4b\uff09\n\/\/ \u201cbounce\u201d\uff08\u5f39\u8df3\uff09\n
\n\n\u00a0\n
rect1<span class="token punctuation">.<\/span>\n<span class="token function">animate<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token punctuation">{<\/span>transform<span class="token punctuation">:<\/span> <span class="token string">"r90t100,0s1.5"<\/span>\n<span class="token punctuation">}<\/span>\n<span class="token punctuation">,<\/span> <span class="token number">1000<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token string">"bounce"<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token keyword">function<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">{<\/span>console<span class="token punctuation">.<\/span>\n<span class="token function">log<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token string">"finish"<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n<span class="token punctuation">}<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n<\/code><\/pre>\n<\/div>\n
\u4e8b\u4ef6\u7ed1\u5b9a<\/blockquote>\n
\n\n\u00a0\n
<span class="token keyword">var<\/span> rect2 <span class="token operator">=<\/span> paper<span class="token punctuation">.<\/span>\n<span class="token function">rect<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token number">60<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">300<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">100<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">50<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">10<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\nrect2<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token string">'fill'<\/span>\n<span class="token punctuation">,<\/span> <span class="token string">'blue'<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\nrect2<span class="token punctuation">.<\/span>\n<span class="token function">mouseover<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token keyword">function<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token punctuation">)<\/span> <span class="token punctuation">{<\/span>                  <span class="token comment">\/\/\u7ed1\u5b9a\u9f20\u6807\u60ac\u6d6e\u4e8b\u4ef6\uff0c\u5176\u4ed6\u4e8b\u4ef6\u7c7b\u4f3c<\/span>\n    rect2<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token punctuation">{<\/span>\n        <span class="token string">"transform"<\/span>\n<span class="token punctuation">:<\/span> <span class="token string">'T0,50s2'<\/span>\n<span class="token punctuation">,<\/span>\n        <span class="token string">"fill"<\/span>\n<span class="token punctuation">:<\/span> <span class="token string">'#000'<\/span>\n    <span class="token punctuation">}<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n<span class="token punctuation">}<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\nrect2<span class="token punctuation">.<\/span>\n<span class="token function">mouseout<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token keyword">function<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token punctuation">)<\/span> <span class="token punctuation">{<\/span>\n    rect2<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token punctuation">{<\/span>\n        <span class="token string">"fill"<\/span>\n<span class="token punctuation">:<\/span> <span class="token string">'blue'<\/span>\n<span class="token punctuation">,<\/span>\n        <span class="token string">"transform"<\/span>\n<span class="token punctuation">:<\/span> <span class="token string">'T0,0s1'<\/span>\n    <span class="token punctuation">}<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n<span class="token punctuation">}<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n<\/code><\/pre>\n<\/div>\n
clone() \u590d\u5236\u4e00\u4e2a<\/blockquote>\n
\n\n\u00a0\n
<span class="token keyword">var<\/span> rect3 <span class="token operator">=<\/span> rect2<span class="token punctuation">.<\/span>\n<span class="token keyword">clone<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token punctuation">{<\/span>\n    <span class="token double-quoted-string string">"x"<\/span>\n<span class="token punctuation">:<\/span> <span class="token number">400<\/span>\n<span class="token punctuation">,<\/span>\n    <span class="token double-quoted-string string">"y"<\/span>\n<span class="token punctuation">:<\/span> <span class="token number">400<\/span>\n<span class="token punctuation">}<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n<\/code><\/pre>\n<\/div>\n
\u753b\u5e03\u7684\u65b9\u6cd5<\/blockquote>\n\/\/ \u753b\u5e03\u7684\u65b9\u6cd5\n\/\/ paper.clear(); \/\/ paper.clear()\u65b9\u6cd5\u6e05\u7a7a\u753b\u5e03\n\n\/\/ \u52a0\u8f7d\u56fe\u7247 paper.image()\n\/\/ \u53c2\u6570 \u8bf4\u660e\n\n\/\/ src \u56fe\u7247\u7684\u8def\u5f84\uff0c\u5bf9\u7ecf\u5e38\u5199\u524d\u53f0\u7684\u7ae5\u978b\u4eec\u6765\u8bf4\u8fd9\u4e2a\u5c0f\u83dc\u4e00\u789f\n\n\/\/ X \u56fe\u7247\u6446\u653e\u4f4d\u7f6e\u7684x\u5750\u6807\n\n\/\/ Y \u56fe\u7247\u6446\u653e\u4f4d\u7f6e\u7684y\u5750\u6807\n\n\/\/ width \u56fe\u7247\u7684\u5bbd\u5ea6\n\n\/\/ height \u56fe\u7247\u7684\u9ad8\u5ea6\n\n\/\/ \u4f8b\uff1apaper.image(“images\/testimage.png”,10,10,200,150);\u5c06\u5728\u753b\u5e03\u7684(10,10)\u4f4d\u7f6e\u6446\u653e\u4e00\u4e2a\u5bbd200\uff0c\u957f150\u7684\u56fe\u7247\u3002\n\n\/\/ paper.setSize()\u7528\u6765\u91cd\u65b0\u8bbe\u7f6e\u753b\u5e03\u7684\u5927\u5c0f\u3002\u4f60\u4ee5\u5728\u53d1\u73b0\u753b\u5e03\u5927\u5c0f\u4e0d\u5408\u9002\u65f6\u8c03\u6574\u753b\u5e03\u7684\u5927\u5c0f\n\/\/ \u800c\u4e0d\u662f\u9700\u8981\u4ece\u5934\u5efa\u7acb\u753b\u5e03\u7136\u540e\u91cd\u590d\u539f\u6765\u7684\u5de5\u4f5c\u3002\u65b9\u6cd5\u67092\u4e2a\u53c2\u6570\uff1a\u5bbd\u548c\u9ad8\n
\n\n\u00a0\n
paper<span class="token punctuation">.<\/span>\n<span class="token function">setSize<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token number">1000<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">1000<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n<span class="token comment">\/\/ \u6211\u4eec\u5c06\u753b\u5e03\u7684\u5927\u5c0f\u4fee\u6539\u4e3a\u5bbd100px\uff0c1000px\u3002<\/span>\n<\/code><\/pre>\n<\/div>\n\/\/ paper.set()\u65b9\u6cd5\u662f\u4e2a\u5f88\u91cd\u8981\u7684\u65b9\u6cd5\u3002\u5b83\u5e2e\u52a9\u6211\u4eec\u5bf9Raphael\u5143\u7d20\u8fdb\u884c\u5206\u7ec4\u7136\u540e\u8fdb\u884c\u6279\u91cf\u7ba1\u7406\n
\n\n\u00a0\n
<span class="token keyword">var<\/span> rect4 <span class="token operator">=<\/span> paper<span class="token punctuation">.<\/span>\n<span class="token function">rect<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token number">300<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">600<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">100<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">50<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">10<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n <span class="token keyword">var<\/span> circle1 <span class="token operator">=<\/span> paper<span class="token punctuation">.<\/span>\n<span class="token function">circle<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token number">400<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">680<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">50<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n <span class="token keyword">var<\/span> <span class="token keyword">set<\/span> <span class="token operator">=<\/span> paper<span class="token punctuation">.<\/span>\n<span class="token function">set<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n <span class="token keyword">set<\/span>\n<span class="token punctuation">.<\/span>\n<span class="token function">push<\/span>\n<span class="token punctuation">(<\/span>circle1<span class="token punctuation">,<\/span>rect4<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n <span class="token comment">\/\/ set.clear();   <\/span>\n <span class="token comment">\/\/ set.exclude(circle1);<\/span>\n <span class="token comment">\/\/ set.attr('fill', 'green');<\/span>\n <span class="token comment">\/\/ \u6211\u4eec\u60f3\u8981\u6e05\u7a7aset\uff0c\u53ef\u4e0d\u8981\u7528remove()\u800c\u662f\u7528clear()\uff0cremove()\u4f1a\u628a\u6240\u6709set\u91cc\u9762\u7684\u5143\u7d20remove\u6389\u3002<\/span>\n <span class="token comment">\/\/ clear()\u53ea\u662f\u6e05\u9664set\u91cc\u7684\u5185\u5bb9\uff0c\u5e76\u4e0d\u4f1a\u5bf9\u91cc\u9762\u7684\u5185\u5bb9\u672c\u8eab\u6709\u5f71\u54cd<\/span>\n <span class="token comment">\/\/ set.exclude(rect);\u8fd8\u8bb0\u5f97\u6211\u524d\u9762\u7684\u4ee3\u7801\u91cc\u9762\u5c06rect\u6dfb\u52a0\u8fdb\u5165raphaelSet\u91cc\u9762\u5417?<\/span>\n <span class="token comment">\/\/ \u73b0\u5728\u4f60\u53ef\u4ee5\u8bd5\u4e00\u8bd5\u5728\u5728\u6267\u884craphaelSet.attr()\u4e4b\u524d\u4f7f\u7528raphaelSet.exclude(rect);<\/span>\n <span class="token comment">\/\/ \u8bd5\u4e00\u8bd5\u3002\u6548\u679c\u548c\u6211\u4eec\u60f3\u8c61\u7684\u4e00\u6837\uff0c\u7b2c\u4e00\u4e2a\u77e9\u5f62\u6ca1\u6709\u88ab\u586b\u5145\u7ea2\u8272\uff0c\u56e0\u4e3a\u5b83\u88ab\u4eceset\u91cc\u9762\u5254\u9664\u51fa\u6765\u4e86\u3002<\/span>\n <span class="token comment">\/\/ set.forEach()\u5c31\u662f\u53bb\u5faa\u73af\u6211\u4eec\u521b\u5efa\u7684set\u5bf9\u8c61\uff0c\u7136\u540e\u901a\u8fc7\u904d\u5386\u5bf9set\u5185\u7684\u5143\u7d20\u8fdb\u884c\u64cd\u4f5c\u3002<\/span>\n <span class="token comment">\/\/ \u8fd9\u4e2a\u529f\u80fd\u662f\u5dee\u4e0d\u591a\u7b97\u662fset\u91cc\u9762\u6700\u91cd\u8981\u7684\u65b9\u6cd5\u4e86\uff0c\u6211\u4eec\u4f7f\u7528set\u5927\u90e8\u5206\u4e1a\u52a1\u90fd\u9700\u8981\u8fd9\u4e2a\u5faa\u73af\u4e86<\/span>\n <span class="token keyword">set<\/span>\n<span class="token punctuation">.<\/span>\n<span class="token function">forEach<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token keyword">function<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token parameter">ele<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">{<\/span>\n\n      ele<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token punctuation">{<\/span>\n<span class="token string">"fill"<\/span>\n<span class="token punctuation">:<\/span>\n<span class="token string">"red"<\/span>\n<span class="token punctuation">}<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n\n<span class="token punctuation">}<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n<\/code><\/pre>\n<\/div>\n\/\/ set.pop(); \u6e05\u9664\u6700\u540e\u4e00\u4e2a\u6dfb\u52a0\u8fdb\u53bb\u7684\u5143\u7d20\n\/\/ set.splice()\u65b9\u6cd5 \u5b83\u67093\u4e2a\u53c2\u6570index,count,element set.splice(1,2,rect)\uff0c\n\/\/ \u6211\u4eceset\u91cc\u9762index\u4e3a1\u7684\u4f4d\u7f6e\u5f00\u59cb\u5f80\u540e\u5220\u96642\u4e2a\u5143\u7d20\uff0c\u7136\u540e\u628arect\u6dfb\u52a0\u8fdb\u6765\u3002\u6240\u4ee5slice\u53ef\u4ee5\u540c\u65f6\u5220\u9664\u548c\u6dfb\u52a0\u5143\u7d20\n
\u900f\u660e\u5ea6<\/blockquote>\n\/\/ \u5143\u7d20\u900f\u660e\u5ea6\u952e\u540dopacity,\u53d6\u503c\u8303\u56f4\u4e3a0\uff08\u5b8c\u5168\u4e0d\u900f\u660e\uff09\u52301\uff08\u5b8c\u5168\u900f\u660e\uff09\uff0c\u4e5f\u53ef\u4ee5\u5206\u522b\u8bbe\u7f6estroke-opacity\u548cfill-opacity\n
\n\n\u00a0\n
 <span class="token keyword">var<\/span> circle2 <span class="token operator">=<\/span> paper<span class="token punctuation">.<\/span>\n<span class="token function">circle<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token number">600<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">680<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">50<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n  circle2<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token punctuation">{<\/span>\n    <span class="token string">"fill"<\/span>\n<span class="token punctuation">:<\/span> <span class="token string">'blue'<\/span>\n<span class="token punctuation">,<\/span>\n    <span class="token string">"stroke"<\/span>\n<span class="token punctuation">:<\/span> <span class="token string">'lime'<\/span>\n<span class="token punctuation">,<\/span>\n    <span class="token string">"stroke-width"<\/span>\n<span class="token punctuation">:<\/span>\n<span class="token number">5<\/span>\n<span class="token punctuation">,<\/span>\n    <span class="token string">"fill-opacity"<\/span>\n<span class="token punctuation">:<\/span>\n<span class="token number">0.5<\/span>\n  <span class="token punctuation">}<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n   <span class="token comment">\/\/ Raphael\u652f\u6301\u901a\u8fc7clip-rect\u5c5e\u6027\u6765\u8fdb\u884c\u5143\u7d20\u7684\u77e9\u5f62\u5207\u5272\uff0c\u5b83\u5141\u8bb8\u6211\u4eec\u5c06\u56fe\u5f62\u5207\u5272\u51fa\u4e00\u90e8\u5206\u4e0b\u6765<\/span>\n   circle2<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token string">'clip-rect'<\/span>\n<span class="token punctuation">,<\/span> <span class="token string">'545,625,50,50'<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n<\/code><\/pre>\n<\/div>\n
Raphael\u652f\u6301\u7ebf\u6027\u548c\u68af\u5ea6\u6e10\u53d8\u53bb\u586b\u5145\u56fe\u5f62\uff0c\u8981\u8fbe\u5230\u8fd9\u4e2a\u6548\u679c\uff0c\u800c\u4e0d\u662f\u76f4\u63a5\u7528\u4e00\u4e2a\u989c\u8272\u7684\u5b57\u7b26\u4e32\u53bb\u8bbe\u7f6efill\u5c5e\u6027\u3002\n\u6211\u4eec\u9700\u8981\u6307\u5b9a\u4e86\u4e0b\u9762\u8fd9\u79cd\u5b57\u7b26\u4e32\u7684\u683c\u5f0f\u53bb\u505a\u5230\u7ebf\u6027\u6e10\u53d8\uff1a\n–[-[:]]-\n\u4e0b\u9762\u7684\u8bed\u6cd5\u5c31\u662f\u8fbe\u5230\u5f84\u5411\u6e10\u53d8\u7684\u6548\u679c\uff1a\nr[(,)][-[:]]-<\/em><\/blockquote>\n
1.\u7ebf\u6027\u6e10\u53d8 ––<\/h5>\n
\n\n\u00a0\n
      <span class="token keyword">var<\/span> rect5 <span class="token operator">=<\/span> paper<span class="token punctuation">.<\/span>\n<span class="token function">rect<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token number">760<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">600<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">100<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">80<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n      rect5<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token string">'fill'<\/span>\n<span class="token punctuation">,<\/span> <span class="token string">'0-red-blue'<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n      rect5<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token string">'fill'<\/span>\n<span class="token punctuation">,<\/span> <span class="token string">'45-red-yellow'<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n<\/code><\/pre>\n<\/div>\n
2.\u5f84\u5411\u6e10\u53d8 r–<\/h5>\n
\n\n\u00a0\n
 <span class="token keyword">var<\/span> circle3 <span class="token operator">=<\/span> paper<span class="token punctuation">.<\/span>\n<span class="token function">circle<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token number">940<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">650<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">50<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n circle3<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token string">'fill'<\/span>\n<span class="token punctuation">,<\/span> <span class="token string">'rblack-white-black'<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n circle3<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token string">'fill'<\/span>\n<span class="token punctuation">,<\/span> <span class="token string">'rblack-white:80-black'<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>  <span class="token comment">\/\/\u4ee5\u534a\u5f84\u768480%\u5904\u4e3a\u7b2c\u4e8c\u9636\u6bb5\u7684\u6e10\u53d8\u5206\u5272\u70b9<\/span>\n<\/code><\/pre>\n<\/div>\n
3.\u504f\u79bb\u5706\u5fc3\u7684\u6e10\u53d8<\/h5>\n
\n\n\u00a0\n
<span class="token keyword">var<\/span> circle4 <span class="token operator">=<\/span> paper<span class="token punctuation">.<\/span>\n<span class="token function">circle<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token number">70<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">900<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">50<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n      <span class="token keyword">var<\/span> circle5 <span class="token operator">=<\/span> paper<span class="token punctuation">.<\/span>\n<span class="token function">circle<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token number">200<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">900<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">50<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n      <span class="token keyword">var<\/span> circle6 <span class="token operator">=<\/span> paper<span class="token punctuation">.<\/span>\n<span class="token function">circle<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token number">330<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">900<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">50<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n      <span class="token keyword">var<\/span> circle7 <span class="token operator">=<\/span> paper<span class="token punctuation">.<\/span>\n<span class="token function">circle<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token number">460<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">900<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">50<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n      <span class="token keyword">var<\/span> circle8 <span class="token operator">=<\/span> paper<span class="token punctuation">.<\/span>\n<span class="token function">circle<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token number">590<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">900<\/span>\n<span class="token punctuation">,<\/span>\n<span class="token number">50<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n      circle4<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token string">'fill'<\/span>\n<span class="token punctuation">,<\/span> <span class="token string">'r(0.1,0.5)#fff-#000'<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>   <span class="token comment">\/\/r(0.5,o.5)\u662f\u6b63\u5706\u5fc3<\/span>\n      circle5<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token string">'fill'<\/span>\n<span class="token punctuation">,<\/span> <span class="token string">'r(0.5,0.1)#fff-#000'<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n      circle6<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token string">'fill'<\/span>\n<span class="token punctuation">,<\/span> <span class="token string">'r(0.9,0.5)#fff-#000'<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n      circle7<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token string">'fill'<\/span>\n<span class="token punctuation">,<\/span> <span class="token string">'r(0.5,0.9)#fff-#000'<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n      circle8<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token string">'fill'<\/span>\n<span class="token punctuation">,<\/span> <span class="token string">'r(0.5,0.5)#c8c8c8-#000'<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n<\/code><\/pre>\n<\/div>\n
\u7ed9\u7ebf\u6761\u52a0\u7bad\u5934\n\u8def\u5f84\u7684\u672b\u5c3e\u663e\u793a\u7bad\u5934\u3002\u5b57\u7b26\u4e32\u683c\u5f0f\u662f[-[-]]\u3002\n\u53ef\u80fd\u7684\u7c7b\u578b\uff1aclassic\u3001block\u3001open\u3001oval\u3001diamond\u3001none\n\u5bbd\uff1awide\u3001narrow\u3001midium\uff0c\u957f\uff1along \u3001short\u3001midium\u3002<\/blockquote>\n
\n\n\u00a0\n
<span class="token keyword">var<\/span> arrow <span class="token operator">=<\/span> paper<span class="token punctuation">.<\/span>\n<span class="token function">path<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token string">"M20,960L120,960"<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token string">'stroke'<\/span>\n<span class="token punctuation">,<\/span> <span class="token string">'lime'<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span> <span class="token comment">\/\/\u7ed8\u4e00\u6761\u76f4\u7ebf<\/span>\n      arrow<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token punctuation">{<\/span>\n        <span class="token string">"arrow-end"<\/span>\n<span class="token punctuation">:<\/span>\n<span class="token string">'classic-wide-midium'<\/span>\n<span class="token punctuation">,<\/span>   <span class="token comment">\/\/\u52a0\u7bad\u5934\u5c5e\u6027<\/span>\n        <span class="token string">"stroke-width"<\/span>\n<span class="token punctuation">:<\/span>\n<span class="token number">3<\/span>\n      <span class="token punctuation">}<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>    \n<\/code><\/pre>\n<\/div>\n
\u7ebf\u6761\u865a\u5316\nstroke-dasharray string [\u201c\u201d, \u201c-\u201d, \u201c.\u201d, \u201c-.\u201d, \u201c-..\u201d, \u201c.\u201d, \u201c- \u201d, \u201c–\u201d, \u201c- .\u201d, \u201c–.\u201d, \u201c–..\u201d]<\/blockquote>\n
\n\n\u00a0\n
<span class="token keyword">var<\/span> dottedLine <span class="token operator">=<\/span> paper<span class="token punctuation">.<\/span>\n<span class="token function">path<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token string">"M200,960,L300,960"<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n      dottedLine<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token punctuation">{<\/span>\n        <span class="token string">"stroke"<\/span>\n<span class="token punctuation">:<\/span> <span class="token string">'blue'<\/span>\n<span class="token punctuation">,<\/span>    <span class="token comment">\/\/\u5148\u7ed9\u4e2a\u989c\u8272<\/span>\n        <span class="token string">"stroke-dasharray"<\/span>\n<span class="token punctuation">:<\/span> <span class="token string">'-.'<\/span>\n      <span class="token punctuation">}<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n<\/code><\/pre>\n<\/div>\n
\u7ebf\u6bb5\u7aef\u70b9\u5904\u7406\nstroke-linecap string [\u201cbutt\u201d, \u201csquare\u201d, \u201cround\u201d]<\/blockquote>\n
\n\n\u00a0\n
      <span class="token keyword">var<\/span> lineCap <span class="token operator">=<\/span> paper<span class="token punctuation">.<\/span>\n<span class="token function">path<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token string">"M320,960L420,960"<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n      lineCap<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token punctuation">{<\/span>\n        <span class="token string">"stroke"<\/span>\n<span class="token punctuation">:<\/span> <span class="token string">'red'<\/span>\n<span class="token punctuation">,<\/span>\n        <span class="token string">"stroke-linecap"<\/span>\n<span class="token punctuation">:<\/span> <span class="token string">'butt'<\/span>\n<span class="token punctuation">,<\/span>\n        <span class="token string">"stroke-width"<\/span>\n<span class="token punctuation">:<\/span> <span class="token number">10<\/span>\n      <span class="token punctuation">}<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n<\/code><\/pre>\n<\/div>\n
stroke-linejoin \u5c5e\u6027\u6307\u660e\u8def\u5f84\u7684\u8f6c\u89d2\u5904\u4f7f\u7528\u7684\u5f62\u72b6\u6216\u8005\u7ed8\u5236\u7684\u57fa\u7840\u5f62\u72b6\u3002\nstroke-linejoin string [\u201cbevel\u201d, \u201cround\u201d, \u201cmiter\u201d]<\/blockquote>\n
\n\n\u00a0\n
      <span class="token keyword">var<\/span> linejoin <span class="token operator">=<\/span> paper<span class="token punctuation">.<\/span>\n<span class="token function">path<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token string">"M440,960L500,960L500,1000"<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span>\n      linejoin<span class="token punctuation">.<\/span>\n<span class="token function">attr<\/span>\n<span class="token punctuation">(<\/span>\n<span class="token punctuation">{<\/span>\n        <span class="token string">"stroke"<\/span>\n<span class="token punctuation">:<\/span> <span class="token string">'orangered'<\/span>\n<span class="token punctuation">,<\/span>\n        <span class="token string">"stroke-linejoin"<\/span>\n<span class="token punctuation">:<\/span> <span class="token string">'bevel'<\/span>\n<span class="token punctuation">,<\/span>\n        <span class="token string">"stroke-width"<\/span>\n<span class="token punctuation">:<\/span> <span class="token number">5<\/span>\n      <span class="token punctuation">}<\/span>\n<span class="token punctuation">)<\/span>\n<span class="token punctuation">;<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n
\n
<\/div>\n\u4f5c\u8005\uff1a\u96e8\u672a\u6d53\n\u94fe\u63a5\uff1ahttps:\/\/www.jianshu.com\/p\/5708dde55290\n\u6765\u6e90\uff1a\u7b80\u4e66\n\u8457\u4f5c\u6743\u5f52\u4f5c\u8005\u6240\u6709\u3002\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u8054\u7cfb\u4f5c\u8005\u83b7\u5f97\u6388\u6743\uff0c\u975e\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u6ce8\u660e\u51fa\u5904\u3002<\/div>","protected":false},"excerpt":{"rendered":"
\u524d\u7aef\u7ed8\u56fe\u7528\u7684\u6700\u591a\u7684\u5c31\u662fsvg\u548ccanvas\uff0c\u73b0\u5728\u6709\u8bb8\u591a\u57fa\u4e8e\u8fd9\u4e24\u79cd\u6280\u672f\u7684\u56fe\u5f62\u6846\u67b6\uff0c\u6bd4\u5982\u57fa\u4e8esvg\u7684D3 \u548c\u57fa\u4e8ecanvas\u7684echarts \u3002\u4eca\u5929\u8981\u8bb2\u7684\u662f\u57fa\u4e8esvg\u7684Raphael Javascript...<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[520,521],"class_list":["post-2441","post","type-post","status-publish","format-standard","hentry","category-other","tag-raphaeljs","tag-svg"],"_links":{"self":[{"href":"http:\/\/nick.txtcc.com\/index.php\/wp-json\/wp\/v2\/posts\/2441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/nick.txtcc.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/nick.txtcc.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/nick.txtcc.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/nick.txtcc.com\/index.php\/wp-json\/wp\/v2\/comments?post=2441"}],"version-history":[{"count":2,"href":"http:\/\/nick.txtcc.com\/index.php\/wp-json\/wp\/v2\/posts\/2441\/revisions"}],"predecessor-version":[{"id":2443,"href":"http:\/\/nick.txtcc.com\/index.php\/wp-json\/wp\/v2\/posts\/2441\/revisions\/2443"}],"wp:attachment":[{"href":"http:\/\/nick.txtcc.com\/index.php\/wp-json\/wp\/v2\/media?parent=2441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/nick.txtcc.com\/index.php\/wp-json\/wp\/v2\/categories?post=2441"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/nick.txtcc.com\/index.php\/wp-json\/wp\/v2\/tags?post=2441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}