使用javascript绘制图形，在html5中可以用canvas，但目前浏览器支持不够，
而 jsDraw2D正是一个很好的解决方案
项目地址：http://jsdraw2d.jsfiction.com/
例子（摘自官网）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/JavaScript" src="jsDraw2D.js"></script>
</head>
<body>
<div id="canvas" style="overflow:hidden;position:relative;width:600px;height:300px;"></div>
<script type="text/JavaScript">
//Create jsGraphics object
var gr = new jsGraphics(document.getElementById("canvas"));
//Create jsColor object
var col = new jsColor("red");
//Create jsPen object
var pen = new jsPen(col,1);
//Draw a Line between 2 points
var pt1 = new jsPoint(20,30);
var pt2 = new jsPoint(120,230);
gr.drawLine(pen,pt1,pt2);
//Draw filled circle with pt1 as center point and radius 30.
gr.fillCircle(col,pt1,30);
//You can also code with inline object instantiation like below
gr.drawLine(pen,new jsPoint(40,10),new jsPoint(70,150));
</script>
</body>
</html>
该类库兼容各个版本的浏览器，功能还算强大
分享到：
相关推荐
《ArcGIS for JavaScript绘制图形深度解析》 ArcGIS API for JavaScript是Esri公司推出的一款强大的地图开发工具，它为Web应用程序提供了丰富的地理空间功能。在本篇中，我们将深入探讨"arcgis for js 绘制图形demo...
首先，我们需要准备一个HTML文件，其中包含一个`<canvas>`元素，这是JavaScript绘制图形的基础。例如： ```html <!DOCTYPE html> <title>JavaScript 饼图示例 <canvas id="mycanvas"></canvas> ...
#### 2.2 JavaScript绘制图形 ```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); function drawRect(x, y, width, height) { ctx.beginPath(); ctx.rect(x, ...
（2）Canvas 使用 JavaScript 在网页上绘制图形，标签为 `<canvas>` ；（3）Canvas 中，绘图 API 提供了像素级的操作方法，比如 `createImageData()` ；（4）Canvas 本身没有绘图功能，绘制要在 JavaScript 内部完成...
JavaScript绘制曲线、圆形饼图实例 本资源是关于使用JavaScript绘制曲线和圆形饼图的实例。该实例使用HTML、JavaScript和CSS技术来实现曲线和圆形饼图的绘制。 知识点1:JavaScript绘制曲线 JavaScript可以使用 ...
Canvas是HTML5的一个重要组成部分，它提供了一个二维绘图环境，允许开发者通过JavaScript绘制图形、动画，非常适合创建这种简单的2D游戏。 在描述中提到“读书的时候写的”，这可能意味着该游戏是作者在学习...
2. HTML5 Canvas：Canvas是HTML5中的一个元素，允许通过JavaScript绘制图形。在这个游戏中，开发者用Canvas绘制了游戏场景、角色、障碍物等，实现了游戏画面的实时渲染。 3. 事件监听与处理：游戏响应用户的键盘...
首先，我们来看"vue+canvas绘制图形"这个主题。Vue组件是Vue.js的核心特性之一，它允许我们将UI拆分成独立、可复用的部分。在这个项目中，我们可以创建一个名为`Canvas.vue`的Vue组件，专门负责处理Canvas元素。在`...
Canvas API涉及绘制图形（如矩形、圆形、路径等）、设置样式、处理事件等。 4. SVG：可缩放矢量图形（Scalable Vector Graphics）是另一种用于描述二维图形的语言。尽管不是JavaScript的一部分，但SVG常常与...
3. **Canvas**: HTML5 的 `<canvas>` 元素是一个可编程的图形区域，允许开发者通过JavaScript绘制图形。在这个项目中，`<canvas>` 用于绘制太空人表盘的各个部分，如指针、背景和其他视觉元素。 4. **CSS**: ...
综上所述，这个“javascript 编写的绘制图表程序”涉及到的技术点涵盖了JavaScript基础、图形绘制、数据处理、交互设计等多个方面，对于学习和理解JavaScript图形编程具有很高的价值。通过阅读和研究源代码，开发者...
在这个"javascript Canvas图形绘制各类图形动画等示例"的压缩包中，你可能会发现一系列关于如何利用Canvas进行图形绘制和动画制作的实例。 首先，Canvas API的基础在于`<canvas>`元素，它是HTML5引入的一个新特性。...
7. **Canvas绘图**：HTML5引入的Canvas元素提供了JavaScript绘制图形的能力。开发者可以通过JavaScript在Canvas上绘制2D图像，实现游戏、图表、动态图形等复杂特效。 8. **WebGL 3D图形**：对于更高级的视觉特效，...
HTML5中的Canvas元素是HTML5标准的一部分，它提供了一种使用JavaScript绘制图形的方法。Canvas的出现对传统的Flash产业造成了冲击，本文将探讨HTML5中Canvas与Flash的应用发展和技术现状，并通过应用Canvas和Flash...
在Web开发中，绘制图形是一项重要的技能，它可以让网页变得更加生动和交互性更强。本教程将探讨如何在Web页面上创建动态图形，并提供一个实例源码来帮助理解这一过程。 首先，我们需要了解基本的绘图工具。HTML5...
javascript绘制简单钟表效果是指使用javascript语言绘制一个简洁的时钟效果，通过使用canvas元素和javascript代码来实现。下面是相关知识点的详细说明： 1. HTML5 canvas元素：canvas元素是HTML5中新增的一种元素，...
要在 Canvas 画布中绘制图形需要使用 JavaScript。首先通过 getElementById 函数找到 Canvas 元素，然后初始化上下文，之后可以使用上下文 API 绘制各种图形。 2D context API 在上面的例子中，我们展示了绘制矩形...
本文主要关注如何利用纯CSS代码来绘制图形，避免使用JavaScript，从而实现更加高效和简洁的页面渲染。 首先，让我们探讨CSS3中的一个重要特性——`box-shadow`，它在"CSS3 box-shadow图形生成技术 « 张鑫旭-鑫空间...
HTML5 Canvas是一个强大的Web图形接口，它允许开发者在网页上直接用JavaScript绘制图形。这个"HTML5 Canvas绘制沙丁鱼群特效"项目是利用Canvas API创建动态、交互式的沙丁鱼群动画效果的一个实例，常见于网站背景...
1. **Canvas API**：Canvas是HTML5中的一个绘图元素，通过JavaScript可以绘制2D图形，书中有详细的教学如何使用Canvas API进行图形绘制。 2. **WebGL**：WebGL允许在浏览器中进行3D图形渲染，书可能介绍了如何使用...