使用HTML5 Canvas和jQuery繪製形狀和線條

我有一個即將推出的項目，我希望使用HTML5 canvas元素來完成過去不得不使用圖像和絕對節奏的div或Flash來完成的事情。這裏是概念的一個基本的例子使用HTML5 Canvas和jQuery繪製形狀和線條

enter image description here

這裏是我的顧慮：

我行使用DIV與圓角半徑以創建圈子，因爲他們將被造型，而且我我不確定我是否可以通過混合使用svg和canvas元素來實現這一點。
我主要關注的是將外圈連接到內圈的筆畫，我想用畫布做到這一點，但我不確定A）如何在一個包含元素（包裝div）中的一個頁面上獲取多個畫布元素，和B）如何找出出發點，我會假設結束點將只是包裝div的中心（如果它的600x600 = x = 300，y = 300）

任何人都可以捨棄一些點亮這個並提供任何建議？在vanilla JS上使用任何jQuery canvas插件是否有優勢？

謝謝！

來源

2012-02-28 Dirty Bird Design

畫布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); 
});

來源

2012-02-28 16:05:52 pimvdb

太棒了！人們如何去向圈子添加內容？是否可以添加一個ID給他們，然後$（「＃ID」）。html（東西）？ – 2012-02-28 16:16:02

@Dirty Bird設計：不，用畫布，你最終只能看到某些像素被着色，沒有其他東西（沒有元素等）。如果你想要各種互動，那麼畫布可能不是要走的路。 – pimvdb 2012-02-28 16:19:25

我很欣賞這課！我將研究混合線條的畫布元素，並使用CSS來設計構成圓形的div。 – 2012-02-28 16:28:51

您可以在CSS中完成所有這些圓。獲取一些div，在CSS中按照你喜歡的樣式設置它們，然後應用border-radius：100;到對象，並完成。我希望這有助於。

來源

2014-11-25 23:30:12 Bshred8

使用HTML5 Canvas和jQuery繪製形狀和線條

回答

相關問題