使用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...
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图形渲染,书可能介绍了如何使用...
HTML5 Canvas是一个强大的Web绘图工具,允许开发者在网页上直接用JavaScript绘制图形。这个"html5 canvas绘制3D房间模型动画特效.zip"文件显然利用了Canvas的这一特性,创建了一个交互式的3D房间场景。下面我们将...