如何使用jQuery和HTML5 canvas绘制一条线 [英] How to draw a line using jQuery and HTML5 canvas

问题描述

我觉得应该是一个简单的问题。我一直试图搜索它一段时间，但我发现的一切都比我需要的更复杂。所以这是我的问题。如何使用jQuery在HTML画布上绘制一个简单的行？

I have what I feel should be a simple question. I have been trying to search for it for a while but everything I find is more complex than what I need. So here is my question. How can I draw a simple line on an HTML canvas using jQuery?

<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）画一条线。

Note.. I am not looking for it to draw or show a drawing motion or anything like that. Basically I just want to be able to load the page and have a line appear. My end goal is eventually draw 3d objects. But before I can do that I first need to know how to do the basics... (IE) Draw a line.

提前致谢

推荐答案

这是如何在Javascript中执行此操作（您可以在函数中插入此函数，但脚本可以正常工作在没有JQuery的脚本标签中，这可能是最好的。示例：

Here's how to do it in Javascript (you can simply insert this inside your function but the script will work fine in a script tag without JQuery, and that's probably best). Example:

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

如果你想变得沉重，那么很难改进Javascript库Raphaël和 D3 。

If you want to get heavy, it's hard to better the Javascript libraries Raphaël and D3.

这篇关于如何使用jQuery和HTML5 canvas绘制一条线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！