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);方法：

＆＃13;

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();

＆＃13;

canvas{cursor:pointer};

＆＃13;

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

＆＃13;

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);

在canvas html

2 个答案: