Question

大家好我正在学习javascript并使用raphael库来创建对象。我正在尝试创建以下示例：

你可以看到我想要的东西，但我希望它能从上到下而不是从左到右

到目前为止，我已经做了这样的事情但是一切顺利。

var Top = paper.rect(700,0,100,189).attr({fill: "red"});;
var mid = paper.rect(700,189,100,221).attr({fill: "yellow"});
var Bot = paper.rect(700,410,100,189).attr({fill: "red"});

任何使它更弯曲的帮助都会很棒

Answer 1

遇到一些有趣的代码：原始链接：https://gist.github.com/omniosi/9556084

Raphael(function(){
  var paper = new Raphael('box', 300, 250);
  //var shape = paper.circle(150, 125, 55);
  var str = getCircleToPath(150, 125, 55);
  //console.log(str);
  function getCircleToPath(x, y, r){ //x and y are center, r is radius
    var s = 'M ' + 
            x + ',' + (y-r)+
            ' A ' + r + ',' + r +
            ' 45 1,1 ' + 
            (x-0.1) + ',' + (y-r) + 
            ' z';
    //console.log(s);
    return s;
  }

  //var shape = paper.path("M 150,70 A 55,55 45 1,1 149.9,70 z");     
  var shape = paper.path(str);     

  shape.attr({
    'stroke-width': 1,
    'stroke-opacity': 1,
    stroke: 'black',
    fill: '#000000'
  }).data('id', 'shape');

  shape.mouseover(function(){
    shape.animate({
      path: "M55,129.8c0-8.1,40.3-9.7,42.7-17c2.5-7.6-29.1-32.6-24.5-38.8c4.6-6.4,38.2,16,44.5,11.3c6.3-4.6-4.6-43.4,3-45.9 c7.3-2.4,21.3,35.4,29.4,35.4c8.1,0,22.1-37.7,29.4-35.4c7.6,2.5-3.3,41.3,3,45.9c6.4,4.6,39.9-17.7,44.5-11.3 c4.6,6.3-27,31.3-24.5,38.8c2.4,7.3,42.7,8.9,42.7,17c0,8.1-40.3,9.7-42.7,17c-2.5,7.6,29.1,32.6,24.5,38.8 c-4.6,6.4-38.2-16-44.5-11.3c-6.3,4.6,4.6,43.4-3,45.9c-7.3,2.4-21.3-35.4-29.4-35.4c-8.1,0-22.1,37.7-29.4,35.4 c-7.6-2.5,3.3-41.3-3-45.9c-6.4-4.6-39.9,17.7-44.5,11.3c-4.6-6.3,27-31.3,24.5-38.8C95.3,139.5,55,137.8,55,129.8z"
    }, 500, 'bounce');

  });

  shape.mouseout(function(){
    shape.animate({
      //path: "M 150,70 A 55,55 45 1,1 149.9,70 z"
      path: str
    }, 500, 'bounce');
  });
});

Answer 2

您需要使用以下liabrary： -

将代码放在头标记中。

<script type="text/JavaScript" src="jsDraw2D.js"></script>

可从here

下载

将以下代码复制并粘贴到您希望圈子显示的位置......

<script type="text/JavaScript">

//Create jsGraphics object
var gr = new jsGraphics(document.getElementById("canvas"));

//Create jsColor object
var col = new jsColor("red");

//Create jsPen object
var pen = new jsPen(col,1);

//Draw a Line between 2 points
var pt1 = new jsPoint(20,30);
var pt2 = new jsPoint(120,230);
gr.drawLine(pen,pt1,pt2);

//Draw filled circle with pt1 as center point and radius 30. 
gr.fillCircle(col,pt1,30);

//You can also code with inline object instantiation like below
gr.drawLine(pen,new jsPoint(40,10),new jsPoint(70,150)); 

</script>

您可以从here

查看相关文档

或者你可以试试这个：

使用HTML5 Canvas和AJAX，您可以执行以下操作：

window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var radius = 10;

    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    context.fillStyle = "black";
    context.fill();
    context.lineWidth = 1;
    context.strokeStyle = "black";
    context.stroke();

};

重要的是：

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

或使用画布：

 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
 Your browser does not support the HTML5 canvas tag.
 </canvas>

 <script>
 var c = document.getElementById("myCanvas");
 var ctx = c.getContext("2d");
 ctx.fillStyle = "#FF0000";
 ctx.fillRect(0,0,150,75);
 </script>

使用raphael：

定义一个函数，该函数接受div的参数，以便您可以自动化该过程：

function drawcircle(div, text) { 
    var paper3 = Raphael(div, 26, 26); //<<
    var circle3 = paper3.circle(13, 13, 10.5);
    circle3.attr("stroke", "#f1f1f1");
    circle3.attr("stroke-width", 2);
    var text3 = paper3.text(12, 13, text); //<<
    text3.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'});
    text3.attr("fill", "#f1f1f1");
}

然后在你的window.onload：

window.onload = function () {
    drawcircle("c1", "1");
    drawcircle("c2", "2");
    drawcircle("c3", "3");
};

Javascript如何创建圈子

2 个答案: