使用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>
该类库兼容各个版本的浏览器,功能还算强大
分享到:
相关推荐
javascript Canvas图形绘制各类图形动画等示例
javascript 通过Cavas javascript脚本绘制各种图形
完全用javascript编写的绘制图表程序,没有采用额外的插件,可以绘制柱状图,折线图,饼状图等,适用于绘制简单图形。
用纯CSS代码绘制图形,不用JS
JavaScript开发二维图形绘制接口
本篇文章主要介绍了JavaScript实现使用Canvas绘制图形的基本教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
ArcGIS API for Javascript 地图开发实例(一、图形绘制和删除
ArcGIS API for JavaScript 4.x 基础之绘制点、线、面、标注、图片的完整代码;
或许这些图形你不需要,但重要的是让你学会JavaScript绘制图形的方法,这是要表达的核心。 运行效果如下图所示: 具体代码如下: <!doctype html> <html> <head> <title>js来绘制圆形和矩形&...
HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。每一个 canvas 元素都有一个"上下文( context )" (想象成绘图板上的一页),在其中可以绘制任意图形。浏览器支持多个 canvas 上下文...
Toxiclibs.js 是一个开源的计算机图形设计库,无需外部依赖,使用 <canvas> 元素进行图形绘制。 标签:Toxiclibs
HTML5规范引进了很多新特性,其中最令人期待的之一就是Canvas元素,HTML5Canvas提供了通过JavaScript绘制图形的方法,非常强大。今天这篇文章收集了20个惊艳的HTML5Canvas应用试验推荐给大家。使用Canvas模仿的3D...
NULL 博文链接:https://jefflan.iteye.com/blog/1209408
canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片、比如刮刮卡、比如制作海报、图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制。 定义 canvas元素...
开发者可以利用Canvas来绘制图形、制作图像处理效果,或者开发复杂的动画效果。在我们的案例中,Canvas的功能将被用来绘制和控制爱心形状的动态显示。 在技术实现上,这需要对JavaScript的事件处理、Canvas绘图方法...
主要介绍了javascript绘制漂亮的心型线效果实现方法,结合完整实例形式分析了JavaScript图形绘制的具体步骤与相关实现技巧,需要的朋友可以参考下
openlayers3 各种特殊图形绘制:进攻方向、自由地、分队战斗、弓型、扇形、箭头、钳击
canvas使用canvas绘制图形
web绘制饼图柱状图线图的利器。使用javascript进行图形绘制。