使用HTML5 Canvas和jQuery绘制形状和线条-Java 学习之路

我有一个即将推出的项目，我想使用HTML5 canvas元素来完成过去必须要做的事情，无论是图像还是绝对节奏的div或Flash . 这是该概念的基本示例

enter image description here

以下是我的担忧：

我可以使用div 's with corner radius to create the circles as they will be styled, and I'我不确定我是否可以使用svg和canvas元素混合使用 .
我主要担心的是将外圈连接到内部的笔划，我想用canvas进行此操作但不确定A）如何在一个包含元素（包装div）和B的页面上获取多个canvas元素）如何弄清楚起点，我会假设结束点只是包装div的中心（IE如果600x600 = x = 300，y = 300）

任何人都可以对此有所了解并提供任何建议吗？使用任何jQuery canvas插件而不是vanilla JS是否有优势？

谢谢！

2 回答

canvas API包含一些似乎可以正常工作的函数：

.moveTo / .lineTo 表示行路径
.arc 表示圆形路径
.stroke 用于描边路径（直线）
.fill 填充路径（圆圈）

这是一个非常简单的概念证明：http://jsfiddle.net/eGjak/275/ .

我已经将 (x, y) 用于线条和圆圈，这意味着线条从两个圆圈的中点开始 . r 是圆的半径 .

var ctx = $('#cv').get(0).getContext('2d');

var circles = [ // smaller circles
    { x:  50, y:  50, r: 25 },
    { x: 250, y:  50, r: 25 },
    { x: 250, y: 250, r: 25 },
    { x:  50, y: 250, r: 25 },
];

var mainCircle = { x: 150, y: 150, r: 50 }; // big circle

function drawCircle(data) {
    ctx.beginPath();
    ctx.arc(data.x, data.y, data.r, 0, Math.PI * 2); // 0 - 2pi is a full circle
    ctx.fill();
}

function drawLine(from, to) {
    ctx.beginPath();
    ctx.moveTo(from.x, from.y);
    ctx.lineTo(to.x, to.y);
    ctx.stroke();
}

drawCircle(mainCircle); // draw big circle

$.each(circles, function() { // draw small circles and lines to them
    drawCircle(this);
    drawLine(mainCircle, this);
});

回复于 2024-04-26T04:36:23+08:00

4

你可以在CSS中完成所有这些圈子 . 获取一些div，在CSS中根据需要设置样式，然后应用border-radius：100;到了对象，并完成了 . 我希望这有帮助 .

回复于 2024-04-26T04:36:23+08:00

使用HTML5 Canvas和jQuery绘制形状和线条

2 回答

相关问题