將正方形轉換爲畫布中的圓圈html

Question

好吧，我明白這是一個大量基本的問題，但我對畫布完全陌生，我只需要做一些簡單的事情。基本上我使用springy.js來繪製力指向圖。圖上的節點是正方形，我只希望它們是圓形。可有人告訴我，我應該在下面的代碼改變，我可以從那裏

弄清楚其餘的我試過

ctx.arc(s.x - boxWidth/2, s.y - boxHeight/2, boxWidth, boxHeight,2*Math.PI); 
ctx.stroke(); 

，而不是與clearRect行，但框將保持與箱之間的連接停止是直線。

function drawNode(node, p) { 
    var s = toScreen(p); 

    ctx.save(); 


    // Pulled out the padding aspect sso that the size functions could be used in multiple places 
    // These should probably be settable by the user (and scoped higher) but this suffices for now 
    var paddingX = 6; 
    var paddingY = 6; 

    var contentWidth = node.getWidth(); 
    var contentHeight = node.getHeight(); 
    var boxWidth = contentWidth + paddingX; 
    var boxHeight = contentHeight + paddingY; 

    // clear background 
    ctx.clearRect(s.x - boxWidth/2, s.y - boxHeight/2, boxWidth, boxHeight); 
    // fill background 
    if (selected !== null && selected.node !== null && selected.node.id === node.id) { 
     ctx.fillStyle = "#FFFFE0"; //when clicked 
    } else if (nearest !== null && nearest.node !== null && nearest.node.id === node.id) { 
     ctx.fillStyle = "#EEEEEE";//when hovered over 
    } else { 
     //if the node.FBScore >10 then ctx.fillStyle = "#F00909"; 
     ctx.fillStyle = "#E34747";//normal colour 
    } 
    ctx.fillRect(s.x - boxWidth/2, s.y - boxHeight/2, boxWidth, boxHeight); 

    if (node.data.image == undefined) { 
     ctx.textAlign = "left"; 
     ctx.textBaseline = "top"; 
     ctx.font = (node.data.font !== undefined) ? node.data.font : nodeFont; 
     ctx.fillStyle = (node.data.color !== undefined) ? node.data.color : "#000000"; 
     var text = (node.data.label !== undefined) ? node.data.label : node.id; 
     ctx.fillText(text, s.x - contentWidth/2, s.y - contentHeight/2); 
    } else { 
     // Currently we just ignore any labels if the image object is set. One might want to extend this logic to allow for both, or other composite nodes. 
     var src = node.data.image.src; // There should probably be a sanity check here too, but un-src-ed images aren't exaclty a disaster. 
     if (src in nodeImages) { 
      if (nodeImages[src].loaded) { 
       // Our image is loaded, so it's safe to draw 
       ctx.drawImage(nodeImages[src].object, s.x - contentWidth/2, s.y - contentHeight/2, contentWidth, contentHeight); 
      } 
     }else{ 
      // First time seeing an image with this src address, so add it to our set of image objects 
      // Note: we index images by their src to avoid making too many duplicates 
      nodeImages[src] = {}; 
      var img = new Image(); 
      nodeImages[src].object = img; 
      img.addEventListener("load", function() { 
       // HTMLImageElement objects are very finicky about being used before they are loaded, so we set a flag when it is done 
       nodeImages[src].loaded = true; 
      }); 
      img.src = src; 
     } 
    } 
    ctx.restore(); 
} 

Answer 1

，而不是替換clearRect()方法，你應該更換fillRect()與arc(x, y, radius, startAngle, endAngle, anticlockwise);一個：

var canvas = document.querySelector('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 

 
function drawNode() { 
 
    var s = { 
 
     x: (Math.random() * 200) + 50, 
 
     y: (Math.random() * 200) + 50 
 
    }; 
 

 
    var paddingX = 6; 
 
    var paddingY = 6; 
 

 
    var contentWidth = s.x/5; 
 
    var contentHeight = s.y/5; 
 
    var boxWidth = contentWidth + paddingX; 
 
    var boxHeight = contentHeight + paddingY; 
 
    ctx.fillStyle = '#AAFFAA'; 
 
    // I modified it so the whole canvas will be cleared 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    // We start a new path 
 
    ctx.beginPath(); 
 
    // then we draw our circle, setting its radius to the max between contentWidth and contentHeight 
 
    ctx.arc(s.x, s.y , Math.max(boxWidth,boxHeight)/2, 0, 2 * Math.PI); 
 
    // and finally we fill it 
 
    ctx.fill(); 
 
} 
 
document.addEventListener('click', drawNode); 
 
drawNode();

canvas{cursor:pointer};

<canvas height="300" width="300" />

Answer 2

我創建一個簡單的jsfiddle展示如何繪製弧形角矩形

- 更新，所以你現在可以簡單地改變roundedValue那麼這將改變角的平滑度。

http://jsfiddle.net/gHCJt/1127/

// Get canvas 
var canvas = $("#canvas"); 
var context = canvas.get(0).getContext("2d"); 

// Draw simple rect 
var rectX = 125; 
var rectY = 125; 
var rectWidth = 150; 
var rectHeight = 150; 
var roundedValue = 75; 

// Apply corner 
context.lineJoin = "round"; 
context.lineWidth = roundedValue; 

// Apply the corner to the draw method for strokeRect and fillRect 
context.strokeRect(rectX+(roundedValue/2), rectY+(roundedValue/2), rectWidth-roundedValue, rectHeight-roundedValue); 
context.fillRect(rectX+(roundedValue/2), rectY+(roundedValue/2), rectWidth-roundedValue, rectHeight-roundedValue);