如何使用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(); 
}