如何使用jQuery和HTML5畫布繪製線條

Question

我有我覺得應該是一個簡單的問題。我一直在努力尋找它，但我發現的一切都比我需要的更復雜。所以這是我的問題。我如何使用jQuery在HTML畫布上繪製一條簡單線條？

<canvas id="canvas"> 
<!-- I want jQuery to draw a line here --> 
</canvas> 


$(document).ready(function() { 
    //I would like the line to draw when the document loads. 
}); 

請注意..我不是在尋找它來繪製或顯示繪圖動作或類似的東西。基本上我只是想能夠加載頁面並顯示一行。我的最終目標是最終繪製3d對象。但在我能做到這一點之前，我首先需要知道如何去做基本的事情......（IE）畫一條線。

在此先感謝

Answer 1

這裏的how to do it in Javascript（你可以簡單地插入這個自己的函數中，但該腳本將在script標籤做工精細沒有JQuery的，而這可能是最好的）。例如：

var c=document.getElementById("canvas"); 
var ctx=c.getContext("2d"); 
ctx.moveTo(0,0); 
ctx.lineTo(150,40); 
ctx.stroke(); 

如果你想變得沉重，很難更好的JavaScript庫Raphaël和D3。

Answer 2

你不需要jQuery這個... jQuery不提供畫布功能。

var canvas = $('#canvas_id')[0]; 
if (canvas.getContext){ 
    var ctx = canvas.getContext('2d'); 
    ctx.lineWidth = 1; 
    ctx.beginPath(); 
    ctx.moveTo(0,0); 
    ctx.lineTo(5,140); 
    ctx.stroke(); 
}