RaphaelJS基础操作

2025 年 8 月
日	一	二	三	四	五	六
	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

前端绘图用的最多的就是svg和canvas，现在有许多基于这两种技术的图形框架，比如基于svg的D3 和基于canvas的echarts 。今天要讲的是基于svg的Raphael Javascript ，它是一个 Javascript的矢量库。

首先你要在HTML中引入RaphaelJS

image.png

然后你就可以在js中使用这个包了

我是先建了一个名为master.js的文件，在这个文件中写js，注意两个文件的放置顺序，由于要在master.js中使用RaphaelJS，所以raphael.js的引用要放在前面

创建画布

1.以坐标点定义画布位置

var paper = Raphael(20, 30, 650, 400); 分别为横坐标，纵坐标，宽度，高度

2.以节点定义画布位置

<span class="token keyword">var</span> width <span class="token operator">=</span> <span class="token number">600</span>
<span class="token punctuation">;</span>
<span class="token keyword">var</span> height <span class="token operator">=</span> <span class="token number">200</span>
<span class="token punctuation">;</span>
<span class="token keyword">var</span> paper <span class="token operator">=</span> <span class="token function">Raphael</span>
<span class="token punctuation">(</span>
<span class="token string">"mySvg"</span>
<span class="token punctuation">,</span>width<span class="token punctuation">,</span>height<span class="token punctuation">)</span>
<span class="token punctuation">;</span>   <span class="token comment">//定义svg绘图节点，及宽度，高度 </span>

封装绘图函数

1.画矩形

<span class="token keyword">function</span> <span class="token function">drawRect</span>
<span class="token punctuation">(</span>
<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>
<span class="token punctuation">)</span>
<span class="token punctuation">{</span>
    <span class="token keyword">var</span> rect <span class="token operator">=</span> paper<span class="token punctuation">.</span>
<span class="token function">rect</span>
<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>
<span class="token punctuation">;</span>     <span class="token comment">//若绘圆角矩形加上圆角参数(横坐标，纵坐标，宽，高，圆角)</span>
    rect<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token punctuation">{</span>
        <span class="token string">"fill"</span>
<span class="token punctuation">:</span> <span class="token string">"red"</span>
<span class="token punctuation">,</span>             <span class="token comment">//填充颜色</span>
        <span class="token string">"stroke"</span>
<span class="token punctuation">:</span> <span class="token string">"lime"</span>
<span class="token punctuation">,</span>     <span class="token comment">//边框颜色</span>
        <span class="token string">"stroke-width"</span>
<span class="token punctuation">:</span> <span class="token number">2</span>   <span class="token comment">// 边框宽度</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

2.画圆

<span class="token keyword">function</span> <span class="token function">drawCircle</span>
<span class="token punctuation">(</span>
<span class="token parameter">x<span class="token punctuation">,</span>y<span class="token punctuation">,</span>r</span>
<span class="token punctuation">)</span>
<span class="token punctuation">{</span>
    <span class="token keyword">var</span> cir <span class="token operator">=</span> paper<span class="token punctuation">.</span>
<span class="token function">circle</span>
<span class="token punctuation">(</span>x<span class="token punctuation">,</span>y<span class="token punctuation">,</span>r<span class="token punctuation">)</span>
<span class="token punctuation">;</span>        <span class="token comment">//(圆心横坐标，圆心纵坐标，半径)</span>
    cir<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token punctuation">{</span>
        <span class="token string">"fill"</span>
<span class="token punctuation">:</span> <span class="token string">"blue"</span>
<span class="token punctuation">,</span>
        <span class="token string">"stroke"</span>
<span class="token punctuation">:</span> <span class="token string">"lime"</span>
<span class="token punctuation">,</span>
        <span class="token string">"stroke-width"</span>
<span class="token punctuation">:</span> <span class="token number">2</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

3.画椭圆

<span class="token keyword">function</span> <span class="token function">drawEllipse</span>
<span class="token punctuation">(</span>
<span class="token parameter">x<span class="token punctuation">,</span>y<span class="token punctuation">,</span>rx<span class="token punctuation">,</span>ry</span>
<span class="token punctuation">)</span>
<span class="token punctuation">{</span>    <span class="token comment">//水平半径和垂直半径其实就是椭圆的rx和ry</span>
    <span class="token keyword">var</span> ellipse <span class="token operator">=</span> paper<span class="token punctuation">.</span>
<span class="token function">ellipse</span>
<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>
<span class="token punctuation">;</span>
    ellipse<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token punctuation">{</span>
        <span class="token string">"fill"</span>
<span class="token punctuation">:</span> <span class="token string">"yellow"</span>
<span class="token punctuation">,</span>
        <span class="token string">"stroke"</span>
<span class="token punctuation">:</span> <span class="token string">"lime"</span>
<span class="token punctuation">,</span>
        <span class="token string">"stroke-width"</span>
<span class="token punctuation">:</span> <span class="token number">2</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

4.画上五边形

function drawDownFive(x,y,w,h){   // 传起点坐标，宽和高
    // 若要使边框完整，从起始坐标到起始坐标，仅填充的话不需在后面加起始坐标或加闭合路径
    // var DownFive = paper.path('M'+x+','+y+'H'+(w+x)+'V'+(h+y)+'L'+(w/2+x)+','+(h+h/2+y)
    // +'L'+x+','+(y+h)+'L'+x+','+y);
    // var DownFive = paper.path('M'+x+','+y+'H'+(w+x)+'V'+(h+y)+'L'+(w/2+x)+','+(h+h/2+y)
    // +'L'+x+','+(y+h)+'Z');
    var DownFive = paper.path('m'+x+','+y+'h'+w+'v'+h+'l'+(-w/2)+','+(h/2)+'l'+(-w/2)+','+(-h/2)+'Z');//相对坐标
    DownFive.attr({
        "fill": 'orangered',
        "stroke": 'lime',
        "stroke-width": 2
    });
}

5.添加文字

<span class="token keyword">function</span> <span class="token function">drawText</span>
<span class="token punctuation">(</span>
<span class="token parameter">x<span class="token punctuation">,</span>y<span class="token punctuation">,</span>txt</span>
<span class="token punctuation">)</span>
<span class="token punctuation">{</span>   <span class="token comment">//  横坐标+纵坐标+文本</span>
    <span class="token keyword">var</span> tip <span class="token operator">=</span> paper<span class="token punctuation">.</span>
<span class="token function">text</span>
<span class="token punctuation">(</span>x<span class="token punctuation">,</span>y<span class="token punctuation">,</span>txt<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
    tip<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token punctuation">{</span>
        <span class="token string">"font-size"</span>
<span class="token punctuation">:</span> <span class="token number">16</span>
<span class="token punctuation">,</span>    <span class="token comment">//字体大小</span>
        <span class="token string">"fill"</span>
<span class="token punctuation">:</span> <span class="token string">'brown'</span>
<span class="token punctuation">,</span>     <span class="token comment">//字体颜色</span>
        <span class="token string">"text-anchor"</span>
<span class="token punctuation">:</span>
<span class="token string">"middle"</span>
<span class="token punctuation">,</span>  <span class="token comment">//  字体对齐样式</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
 <span class="token punctuation">}</span>
 <span class="token function">drawText</span>
<span class="token punctuation">(</span>
<span class="token number">200</span>
<span class="token punctuation">,</span>
<span class="token number">140</span>
<span class="token punctuation">,</span>
<span class="token string">"椭圆弧的使用"</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>

Raphael元素的变换

// T 平移 // S 缩放 Sx,y 横向缩放x倍,纵向缩放y倍 // R 按角度旋转 // M 变换矩阵 // 每个字母是一个命令 t是平移，r是旋转，s是缩放，m是矩阵 // 也有另类的“绝对”平移、旋转和缩放：T、R和S。他们不会考虑到以前的变换

<span class="token keyword">var</span> rect1 <span class="token operator">=</span> paper<span class="token punctuation">.</span>
<span class="token function">rect</span>
<span class="token punctuation">(</span>
<span class="token number">20</span>
<span class="token punctuation">,</span>
<span class="token number">300</span>
<span class="token punctuation">,</span>
<span class="token number">100</span>
<span class="token punctuation">,</span>
<span class="token number">50</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
 rect1<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token punctuation">{</span>
    <span class="token string">"transform"</span>
<span class="token punctuation">:</span> <span class="token string">'r90T100,0s0.5'</span>
 <span class="token punctuation">}</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>

Raphael图形的动画效果

// 语法如下：Element.animate({动画属性的键值对},动画时间,缓动类型,回调函数); // 缓动类型其实就是动画过渡公式，是哪种类型的。主要有以下这些类型： // “linear”（线性） // “<”或“easeIn”或“ease-in” （由慢到快） // “>”或“easeOut”或“ease-out”（又快到慢） // “<>”或“easeInOut”或“ease-in-out”（由慢到快再到慢） // “backIn”或“back-in”（开始时回弹） // “backOut”或“back-out”（结束时回弹） // “elastic”（橡皮筋） // “bounce”（弹跳）

rect1<span class="token punctuation">.</span>
<span class="token function">animate</span>
<span class="token punctuation">(</span>
<span class="token punctuation">{</span>transform<span class="token punctuation">:</span> <span class="token string">"r90t100,0s1.5"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">,</span> <span class="token number">1000</span>
<span class="token punctuation">,</span>
<span class="token string">"bounce"</span>
<span class="token punctuation">,</span>
<span class="token keyword">function</span>
<span class="token punctuation">(</span>
<span class="token punctuation">)</span>
<span class="token punctuation">{</span>console<span class="token punctuation">.</span>
<span class="token function">log</span>
<span class="token punctuation">(</span>
<span class="token string">"finish"</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>

事件绑定

<span class="token keyword">var</span> rect2 <span class="token operator">=</span> paper<span class="token punctuation">.</span>
<span class="token function">rect</span>
<span class="token punctuation">(</span>
<span class="token number">60</span>
<span class="token punctuation">,</span>
<span class="token number">300</span>
<span class="token punctuation">,</span>
<span class="token number">100</span>
<span class="token punctuation">,</span>
<span class="token number">50</span>
<span class="token punctuation">,</span>
<span class="token number">10</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
rect2<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token string">'fill'</span>
<span class="token punctuation">,</span> <span class="token string">'blue'</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
rect2<span class="token punctuation">.</span>
<span class="token function">mouseover</span>
<span class="token punctuation">(</span>
<span class="token keyword">function</span>
<span class="token punctuation">(</span>
<span class="token punctuation">)</span> <span class="token punctuation">{</span>                  <span class="token comment">//绑定鼠标悬浮事件，其他事件类似</span>
    rect2<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token punctuation">{</span>
        <span class="token string">"transform"</span>
<span class="token punctuation">:</span> <span class="token string">'T0,50s2'</span>
<span class="token punctuation">,</span>
        <span class="token string">"fill"</span>
<span class="token punctuation">:</span> <span class="token string">'#000'</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
rect2<span class="token punctuation">.</span>
<span class="token function">mouseout</span>
<span class="token punctuation">(</span>
<span class="token keyword">function</span>
<span class="token punctuation">(</span>
<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    rect2<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token punctuation">{</span>
        <span class="token string">"fill"</span>
<span class="token punctuation">:</span> <span class="token string">'blue'</span>
<span class="token punctuation">,</span>
        <span class="token string">"transform"</span>
<span class="token punctuation">:</span> <span class="token string">'T0,0s1'</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>

clone() 复制一个

<span class="token keyword">var</span> rect3 <span class="token operator">=</span> rect2<span class="token punctuation">.</span>
<span class="token keyword">clone</span>
<span class="token punctuation">(</span>
<span class="token punctuation">)</span>
<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token punctuation">{</span>
    <span class="token double-quoted-string string">"x"</span>
<span class="token punctuation">:</span> <span class="token number">400</span>
<span class="token punctuation">,</span>
    <span class="token double-quoted-string string">"y"</span>
<span class="token punctuation">:</span> <span class="token number">400</span>
<span class="token punctuation">}</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>

画布的方法

// 画布的方法 // paper.clear(); // paper.clear()方法清空画布 // 加载图片 paper.image() // 参数说明 // src 图片的路径，对经常写前台的童鞋们来说这个小菜一碟 // X 图片摆放位置的x坐标 // Y 图片摆放位置的y坐标 // width 图片的宽度 // height 图片的高度 // 例：paper.image(“images/testimage.png”,10,10,200,150);将在画布的(10,10)位置摆放一个宽200，长150的图片。 // paper.setSize()用来重新设置画布的大小。你以在发现画布大小不合适时调整画布的大小 // 而不是需要从头建立画布然后重复原来的工作。方法有2个参数：宽和高

paper<span class="token punctuation">.</span>
<span class="token function">setSize</span>
<span class="token punctuation">(</span>
<span class="token number">1000</span>
<span class="token punctuation">,</span>
<span class="token number">1000</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
<span class="token comment">// 我们将画布的大小修改为宽100px，1000px。</span>

// paper.set()方法是个很重要的方法。它帮助我们对Raphael元素进行分组然后进行批量管理

<span class="token keyword">var</span> rect4 <span class="token operator">=</span> paper<span class="token punctuation">.</span>
<span class="token function">rect</span>
<span class="token punctuation">(</span>
<span class="token number">300</span>
<span class="token punctuation">,</span>
<span class="token number">600</span>
<span class="token punctuation">,</span>
<span class="token number">100</span>
<span class="token punctuation">,</span>
<span class="token number">50</span>
<span class="token punctuation">,</span>
<span class="token number">10</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
 <span class="token keyword">var</span> circle1 <span class="token operator">=</span> paper<span class="token punctuation">.</span>
<span class="token function">circle</span>
<span class="token punctuation">(</span>
<span class="token number">400</span>
<span class="token punctuation">,</span>
<span class="token number">680</span>
<span class="token punctuation">,</span>
<span class="token number">50</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
 <span class="token keyword">var</span> <span class="token keyword">set</span> <span class="token operator">=</span> paper<span class="token punctuation">.</span>
<span class="token function">set</span>
<span class="token punctuation">(</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
 <span class="token keyword">set</span>
<span class="token punctuation">.</span>
<span class="token function">push</span>
<span class="token punctuation">(</span>circle1<span class="token punctuation">,</span>rect4<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
 <span class="token comment">// set.clear();   </span>
 <span class="token comment">// set.exclude(circle1);</span>
 <span class="token comment">// set.attr('fill', 'green');</span>
 <span class="token comment">// 我们想要清空set，可不要用remove()而是用clear()，remove()会把所有set里面的元素remove掉。</span>
 <span class="token comment">// clear()只是清除set里的内容，并不会对里面的内容本身有影响</span>
 <span class="token comment">// set.exclude(rect);还记得我前面的代码里面将rect添加进入raphaelSet里面吗?</span>
 <span class="token comment">// 现在你可以试一试在在执行raphaelSet.attr()之前使用raphaelSet.exclude(rect);</span>
 <span class="token comment">// 试一试。效果和我们想象的一样，第一个矩形没有被填充红色，因为它被从set里面剔除出来了。</span>
 <span class="token comment">// set.forEach()就是去循环我们创建的set对象，然后通过遍历对set内的元素进行操作。</span>
 <span class="token comment">// 这个功能是差不多算是set里面最重要的方法了，我们使用set大部分业务都需要这个循环了</span>
 <span class="token keyword">set</span>
<span class="token punctuation">.</span>
<span class="token function">forEach</span>
<span class="token punctuation">(</span>
<span class="token keyword">function</span>
<span class="token punctuation">(</span>
<span class="token parameter">ele</span>
<span class="token punctuation">)</span>
<span class="token punctuation">{</span>

      ele<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token punctuation">{</span>
<span class="token string">"fill"</span>
<span class="token punctuation">:</span>
<span class="token string">"red"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>

<span class="token punctuation">}</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>

// set.pop(); 清除最后一个添加进去的元素 // set.splice()方法它有3个参数index,count,element set.splice(1,2,rect)， // 我从set里面index为1的位置开始往后删除2个元素，然后把rect添加进来。所以slice可以同时删除和添加元素

透明度

// 元素透明度键名opacity,取值范围为0（完全不透明）到1（完全透明），也可以分别设置stroke-opacity和fill-opacity

 <span class="token keyword">var</span> circle2 <span class="token operator">=</span> paper<span class="token punctuation">.</span>
<span class="token function">circle</span>
<span class="token punctuation">(</span>
<span class="token number">600</span>
<span class="token punctuation">,</span>
<span class="token number">680</span>
<span class="token punctuation">,</span>
<span class="token number">50</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
  circle2<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token punctuation">{</span>
    <span class="token string">"fill"</span>
<span class="token punctuation">:</span> <span class="token string">'blue'</span>
<span class="token punctuation">,</span>
    <span class="token string">"stroke"</span>
<span class="token punctuation">:</span> <span class="token string">'lime'</span>
<span class="token punctuation">,</span>
    <span class="token string">"stroke-width"</span>
<span class="token punctuation">:</span>
<span class="token number">5</span>
<span class="token punctuation">,</span>
    <span class="token string">"fill-opacity"</span>
<span class="token punctuation">:</span>
<span class="token number">0.5</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
   <span class="token comment">// Raphael支持通过clip-rect属性来进行元素的矩形切割，它允许我们将图形切割出一部分下来</span>
   circle2<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token string">'clip-rect'</span>
<span class="token punctuation">,</span> <span class="token string">'545,625,50,50'</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>

Raphael支持线性和梯度渐变去填充图形，要达到这个效果，而不是直接用一个颜色的字符串去设置fill属性。 我们需要指定了下面这种字符串的格式去做到线性渐变： –[-[:]]- 下面的语法就是达到径向渐变的效果： r[(,)][-[:]]-

1.线性渐变 ––

      <span class="token keyword">var</span> rect5 <span class="token operator">=</span> paper<span class="token punctuation">.</span>
<span class="token function">rect</span>
<span class="token punctuation">(</span>
<span class="token number">760</span>
<span class="token punctuation">,</span>
<span class="token number">600</span>
<span class="token punctuation">,</span>
<span class="token number">100</span>
<span class="token punctuation">,</span>
<span class="token number">80</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
      rect5<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token string">'fill'</span>
<span class="token punctuation">,</span> <span class="token string">'0-red-blue'</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
      rect5<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token string">'fill'</span>
<span class="token punctuation">,</span> <span class="token string">'45-red-yellow'</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>

2.径向渐变 r–

 <span class="token keyword">var</span> circle3 <span class="token operator">=</span> paper<span class="token punctuation">.</span>
<span class="token function">circle</span>
<span class="token punctuation">(</span>
<span class="token number">940</span>
<span class="token punctuation">,</span>
<span class="token number">650</span>
<span class="token punctuation">,</span>
<span class="token number">50</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
 circle3<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token string">'fill'</span>
<span class="token punctuation">,</span> <span class="token string">'rblack-white-black'</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
 circle3<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token string">'fill'</span>
<span class="token punctuation">,</span> <span class="token string">'rblack-white:80-black'</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>  <span class="token comment">//以半径的80%处为第二阶段的渐变分割点</span>

3.偏离圆心的渐变

<span class="token keyword">var</span> circle4 <span class="token operator">=</span> paper<span class="token punctuation">.</span>
<span class="token function">circle</span>
<span class="token punctuation">(</span>
<span class="token number">70</span>
<span class="token punctuation">,</span>
<span class="token number">900</span>
<span class="token punctuation">,</span>
<span class="token number">50</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
      <span class="token keyword">var</span> circle5 <span class="token operator">=</span> paper<span class="token punctuation">.</span>
<span class="token function">circle</span>
<span class="token punctuation">(</span>
<span class="token number">200</span>
<span class="token punctuation">,</span>
<span class="token number">900</span>
<span class="token punctuation">,</span>
<span class="token number">50</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
      <span class="token keyword">var</span> circle6 <span class="token operator">=</span> paper<span class="token punctuation">.</span>
<span class="token function">circle</span>
<span class="token punctuation">(</span>
<span class="token number">330</span>
<span class="token punctuation">,</span>
<span class="token number">900</span>
<span class="token punctuation">,</span>
<span class="token number">50</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
      <span class="token keyword">var</span> circle7 <span class="token operator">=</span> paper<span class="token punctuation">.</span>
<span class="token function">circle</span>
<span class="token punctuation">(</span>
<span class="token number">460</span>
<span class="token punctuation">,</span>
<span class="token number">900</span>
<span class="token punctuation">,</span>
<span class="token number">50</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
      <span class="token keyword">var</span> circle8 <span class="token operator">=</span> paper<span class="token punctuation">.</span>
<span class="token function">circle</span>
<span class="token punctuation">(</span>
<span class="token number">590</span>
<span class="token punctuation">,</span>
<span class="token number">900</span>
<span class="token punctuation">,</span>
<span class="token number">50</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
      circle4<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token string">'fill'</span>
<span class="token punctuation">,</span> <span class="token string">'r(0.1,0.5)#fff-#000'</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>   <span class="token comment">//r(0.5,o.5)是正圆心</span>
      circle5<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token string">'fill'</span>
<span class="token punctuation">,</span> <span class="token string">'r(0.5,0.1)#fff-#000'</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
      circle6<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token string">'fill'</span>
<span class="token punctuation">,</span> <span class="token string">'r(0.9,0.5)#fff-#000'</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
      circle7<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token string">'fill'</span>
<span class="token punctuation">,</span> <span class="token string">'r(0.5,0.9)#fff-#000'</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
      circle8<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token string">'fill'</span>
<span class="token punctuation">,</span> <span class="token string">'r(0.5,0.5)#c8c8c8-#000'</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>

给线条加箭头路径的末尾显示箭头。字符串格式是[-[-]]。可能的类型：classic、block、open、oval、diamond、none 宽：wide、narrow、midium，长：long 、short、midium。

<span class="token keyword">var</span> arrow <span class="token operator">=</span> paper<span class="token punctuation">.</span>
<span class="token function">path</span>
<span class="token punctuation">(</span>
<span class="token string">"M20,960L120,960"</span>
<span class="token punctuation">)</span>
<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token string">'stroke'</span>
<span class="token punctuation">,</span> <span class="token string">'lime'</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span> <span class="token comment">//绘一条直线</span>
      arrow<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token punctuation">{</span>
        <span class="token string">"arrow-end"</span>
<span class="token punctuation">:</span>
<span class="token string">'classic-wide-midium'</span>
<span class="token punctuation">,</span>   <span class="token comment">//加箭头属性</span>
        <span class="token string">"stroke-width"</span>
<span class="token punctuation">:</span>
<span class="token number">3</span>
      <span class="token punctuation">}</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>

线条虚化 stroke-dasharray string [“”, “-”, “.”, “-.”, “-..”, “.”, “- ”, “–”, “- .”, “–.”, “–..”]

<span class="token keyword">var</span> dottedLine <span class="token operator">=</span> paper<span class="token punctuation">.</span>
<span class="token function">path</span>
<span class="token punctuation">(</span>
<span class="token string">"M200,960,L300,960"</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
      dottedLine<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token punctuation">{</span>
        <span class="token string">"stroke"</span>
<span class="token punctuation">:</span> <span class="token string">'blue'</span>
<span class="token punctuation">,</span>    <span class="token comment">//先给个颜色</span>
        <span class="token string">"stroke-dasharray"</span>
<span class="token punctuation">:</span> <span class="token string">'-.'</span>
      <span class="token punctuation">}</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>

线段端点处理 stroke-linecap string [“butt”, “square”, “round”]

      <span class="token keyword">var</span> lineCap <span class="token operator">=</span> paper<span class="token punctuation">.</span>
<span class="token function">path</span>
<span class="token punctuation">(</span>
<span class="token string">"M320,960L420,960"</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
      lineCap<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token punctuation">{</span>
        <span class="token string">"stroke"</span>
<span class="token punctuation">:</span> <span class="token string">'red'</span>
<span class="token punctuation">,</span>
        <span class="token string">"stroke-linecap"</span>
<span class="token punctuation">:</span> <span class="token string">'butt'</span>
<span class="token punctuation">,</span>
        <span class="token string">"stroke-width"</span>
<span class="token punctuation">:</span> <span class="token number">10</span>
      <span class="token punctuation">}</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>

stroke-linejoin 属性指明路径的转角处使用的形状或者绘制的基础形状。 stroke-linejoin string [“bevel”, “round”, “miter”]

      <span class="token keyword">var</span> linejoin <span class="token operator">=</span> paper<span class="token punctuation">.</span>
<span class="token function">path</span>
<span class="token punctuation">(</span>
<span class="token string">"M440,960L500,960L500,1000"</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
      linejoin<span class="token punctuation">.</span>
<span class="token function">attr</span>
<span class="token punctuation">(</span>
<span class="token punctuation">{</span>
        <span class="token string">"stroke"</span>
<span class="token punctuation">:</span> <span class="token string">'orangered'</span>
<span class="token punctuation">,</span>
        <span class="token string">"stroke-linejoin"</span>
<span class="token punctuation">:</span> <span class="token string">'bevel'</span>
<span class="token punctuation">,</span>
        <span class="token string">"stroke-width"</span>
<span class="token punctuation">:</span> <span class="token number">5</span>
      <span class="token punctuation">}</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>

作者：雨未浓链接：https://www.jianshu.com/p/5708dde55290 来源：简书著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

其他操作

鸣谢以下云主机供应商

链接表

其它 · 2022-05-25