將方塊轉換為畫布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()方法，您應該用arc(x, y, radius, startAngle, endAngle, anticlockwise);替換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 = sx / 5; var contentHeight = sy / 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(sx, sy , 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);