用js绘图

<object id=DirectDraw
classid="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6"
style="positiion:absolute;top:0;left:0;width:320;height:200"
>
<param name="line0001" value="绘图指令1">
<param name="line0002" value="绘图指令2">
...
</object>
绘图指令分类：
(一)常见形状
1.矩形类 //rotation是以度为单位的旋转角度
Rect(x ,y, width, height, rotation) //矩形
Oval(x ,y, width, height, rotation) //椭圆
RoundRect(x ,y, width, height, arcWidth, arcHeight, rotation)
2.弧形类
Arc(x ,y, width, height, startAngle, arcAngle, rotation) //弧形
Pie(x ,y, width, height, startAngle, arcAngle, rotation) //饼图
3.多边形类
Polygon(nPoints, x1, y1, x2, y2, [x3, y3, ....], rotation) //闭合
Polyline(nPoints, x1, y1, x2, y2, [xn, yn, ....], rotation) //不闭合
(二)效果函数
1.线条效果
SetLineColor(r, g, b) //设置画线颜色
SetLineStyle(style) //style=(1:实线;2:虚线;0:隐藏)
2.填充效果
SetFillColor(r, g, b, backr, backg, backb)
SetFillStyle(style) //style=(1:实心;2:透明;3:-;4:|;5:\;6:/;7:+;8:x)
(三)文字输出函数
SetFont('字体',width,height,r,g,b) //设置字体
Text('要输出的文字内容', x,y,z) //输出文字

控制函数 //定义<object>后在<script></script>里使用。
引用格式：DirectDraw.FunctionName()
rotate(x-rotation, y-rotation, z-rotation) //旋转
scale(x-scale,y-scale,z-scale) //缩放
translate(x-coordinate,y-coordinate,z-coordinate) //平移
setIdentity() //复原
clear() //清除,清除后无法恢复！

赞 (0)

相关推荐

  • RequireJS简易绘图程序开发

    RequireJS简易绘图程序开发

    前言 RequireJS的出现让前端代码模块化变得容易,当前端项目越来越大,代码越来越多的时候,模块化代码让项目结构更清晰,不仅在开发时让我们的思路更清晰,而且后期维护起来也更容易.下面是我学习RequireJS后使用RequireJS开发的一款简易绘图程序,运行在浏览器中如下图所示: 如果你对RequireJS还不是很了解,可以看我的RequireJS学习笔记:http://blog.csdn.net/yubo_725/article/details/52913853 开始 这个简易绘图程序的

  • VML绘图板②脚本--VMLgraph.js、XMLtool.js

    脚本************** VMLgraph.js*************var xo=0;var yo=0;var ox=80;var oy=20;var dx=0;var dy=0;var drawKey = false;var itemID = 0;var ShapeItemNum = 0;var ShapeItemX = 0;var ShapeItemY = 0;var CurveItemNum = 0;var NodeDelete = false;var ToolBarNum

  • JavaScript 绘图代码

    JavaScript绘图 IE4 = ! (navigator.appVersion.charAt(0) ') } function Plot(x,y) { outPlot(x,y,1,1) if(Ox>=0 || Oy>=0) { ShowLine(Ox,Oy,x-Ox,y-Oy) } Ox = x Oy = y } function ShowLine(x,y,w,h) { if(w0) return 1 if(ndy) { temp = dx dx = dy dy = temp key =

  • 小心！AngularJS结合RequireJS做文件合并压缩的那些坑

    小心！AngularJS结合RequireJS做文件合并压缩的那些坑

    在项目使用了AngularJS框架,用RequireJS做异步模块加载(AMD),在做文件合并压缩时,遇到了一些坑,有些只是解决了,但不明白原因. 那些坑 1. build.js里面的paths必须跟main.js里面的保持一致. 这个build.js就是r.js使用的配置文件,而main.js就是RequireJS的main文件.在合并压缩时候,build.js文件里面也需要写paths,而且还是跟main.js一样,我很奇怪为什么就不能识别main里面的require.config的path

  • SeaJS 与 RequireJS 的差异对比

    SeaJS 与 RequireJS 的差异对比

    "历史不是过去,历史正在上演.随着 W3C 等规范.以及浏览器的飞速发展,前端的模块化开发会逐步成为基础设施.一切终究都会成为历史,未来会更好."--引用玉伯原文最后一段话,我个人也非常赞同.既然谈到了"未来",我个人认为:前端 js 模块如果继续发展,其模块格式很可能会成为未来 WEB 一种标准规范,产生多种实现方式.就好比 JSON 格式一样,最终成为标准.被浏览器原生实现. 谁更有能成为未来的异步模块标准?SeaJS 遵循 CMD 规范,RequireJS 遵

  • 一篇文章掌握RequireJS常用知识

    一篇文章掌握RequireJS常用知识

    本文采取循序渐进的方式,从理论到实践,从RequireJS官方API文档中,总结出在使用RequireJS过程中最常用的一些用法,并对文档中不够清晰具体的内容,加以例证和分析,分享给大家供大家参考,具体内容如下 1. 模块化 相信每个前端开发人员在刚开始接触js编程时,都写过类似下面这样风格的代码: <script type="text/javascript"> var a = 1; var b = 2; var c = a * a + b * b; if(c> 1)

  • 纯JavaScript代码实现移动设备绘图解锁

    纯JavaScript代码实现移动设备绘图解锁

    移动手机设备上有一个屏幕解锁的应用相信大家都不陌生,在移动设备上,用户可以通过设置锁定图案作为密码对设备用户界面进行锁定,锁定界面如下图所示. 效果图如下所示 JavaScript Code <script> $("#gesturepwd").GesturePasswd({ backgroundColor:"#2980B9", //背景色 color:"#FFFFFF", //主要的控件颜色 roundRadii:50, //大圆点的

  • 探索angularjs+requirejs全面实现按需加载的套路

    在进行有一定规模的项目时,通常希望实现以下目标:1.支持复杂的页面逻辑(根据业务规则动态展现内容,例如:权限,数据状态等):2.坚持前后端分离的基本原则(不分离的时候,可以在后端用模版引擎直接生成好页面):3.页面加载时间短(业务逻辑复杂就需要引用第三方的库,但很可能加载的库和用户本次操作没关系):4,还要代码好维护(加入新的逻辑时,影响的文件尽量少). 想同时实现这些目标,就必须有一套按需加载的机制,页面上展现的内容和所有需要依赖的文件,都可以根据业务逻辑需要按需加载.最近都是基于angula

  • 用JavaScript绘图 ——JS2D函数集

    /****************** JS2D函数集 ******************* 作者:neweroica 2003-3-28 CopyRight (C) 2003 在引用或转载时请保留此版权信息,谢谢!!! 本函数集可以单独存成一个js文件:"JS2D.js" ***************************************************/ /************* 画点 ************** x,y 点所在的屏幕坐标(像素) col

  • JS绘图Flot应用图形绘制异常解决方案

    今天再次动手用Flot,但是今天用的时候出现一些问题 首次报错的是 网页错误详细信息 用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; QQDownload 721; InfoPath.2) 时间戳: Fri, 8 Jun 2012 04:59:50 UTC 消息: 'window.G_vmlCanvasManager' 为空或不是对象 行: 698 字符: 17 代码: 0 URI: http://loc

  • JS绘图Flot如何实现动态可刷新曲线图

    刚刚做的是一个静态的曲线图,只要设置数据,就可以直接显示.下面来做一个根据时间间隔根据新数据一直变的曲线绘图示例. 同样,为了兼容不同浏览器,请一定要引入三个JS文件,否则不保证在IE下的运行. 首先来看一下效果! 刷新间隔的实现其实就是定时调用某个函数,这个函数将绘图对象里面的数据更新即可. 我们来看一下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

  • JS绘图Flot如何实现可选显示曲线图功能

    刚刚做了可以动态去刷新的曲线图,下面再来实现一个可以选择显示那个显示值的曲线图. 首先看一下效果: 下面的多选框,选择以后会触发一个事件,等同与重新绘制了曲线图. 重点是需要的数据的格式,我们来看一下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

  • 用js绘图

    <object id=DirectDraw classid="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6" style="positiion:absolute;top:0;left:0;width:320;height:200" > <param name="line0001" value="绘图指令1"> <param name="line00

  • JS页面动态绘图工具SVG，Canvas，VML介简介

    说到绘图.报表之类的技术,大家首先想到的就是Flex,当然也有许多了解javaapplet,对于这两种技术来说,各有利弊. 首先Flex很笨重,但是其效果实在让人喜欢.对于javaapplet来说,至少我在网络上很少看到,当然对于我们做开发的来说在我们的开发工具或者内部网络上还是有一些的. 其实现在Web上进行绘图的话还是有很多选择的,你可以到谷歌上搜索JS绘图,会有很多绘图工具提供给你使用,而且功能非常强大.比如说maxGraph,你可以到http://www.jgraph.com/mxgra

  • 详解plotly.js 绘图库入门使用教程

    详解plotly.js 绘图库入门使用教程

    本文介绍了plotly.js 绘图库入门使用教程,分享给大家,具体如下: Plotly 缘起 这两天想在前端展现数学函数图像,猜测应该有成熟的 js 库. 于是,简单的进行了尝试. 最后决定使用plotly.js,其他的比如function-plot 看起来也不错,以后有时间再看. Plotly plotly.jsis the open source JavaScript graphing library that powers Plotly. Plotly 可以称之为迄今最优秀的绘图库,没有之

  • mapper--图片热点区域高亮组件官方站点

    mapper--图片热点区域高亮组件官方站点

    很有意思的一个东西,我们都用过图片热点对多个切片做链接,也用过链接的hover高亮效果,但却没有办法实现图片热点的高亮效果(即鼠标悬停在某个热点区域时该区域高亮显示). Mapper就是这样的小组件,利用js绘图和css定义实现了这样一个很有用处的功能. 官方站点及演示:http://www.netzgesta.de/mapper/ =================================== PS:除此之外,该站还有一些其他的图片特效js库,对图片的各种效果做的真是炉火垂青!赞! 进

  • R语言绘制空间热力图实例讲解

    R语言绘制空间热力图实例讲解

    先上图 R语言的REmap包拥有非常强大的空间热力图以及空间迁移图功能,里面内置了国内外诸多城市坐标数据,使用起来方便快捷. 开始首先安装相关包 install_packages("devtools") install_packages("REmap") library(devtools) library(REmap) 我们来试试其强大的城市坐标获取功能 city<- c("beijing","上海") get_geo_

  • 原生JS使用Canvas实现拖拽式绘图功能

    一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方js库和插件 3.多图形绘制(支持画笔.线条.箭头.三角形.矩形.平行四边形.梯形以及多边形和圆形绘制) 4.拖拽式绘制(鼠标移动过程中不断进行canvas重绘) 5.图片绘制(作为背景图片时重绘会发生闪烁现象,暂时有点问题,后面继续完善) 5.清空绘制功能 6.新版本优化绘制性能(使用共享坐标变量数

  • JS前端绘图canvas模糊问题示例高清图解

    JS前端绘图canvas模糊问题示例高清图解

    目录 缘起 模糊的原因 1.canvas 的大小和 css 的大小不一致 2.当绘制的东西不足 1px,会自动补足 1px 3.受到高清屏的影响 结语 缘起 模糊在 canvas 中应该算是个经典问题了,相信大家也曾经看过很多相关文章,但总是记不住,因为概念很多,描述的也不够明确,所以我就自己总结了一篇,刨去了复杂概念,顺带画了几张高清图,以此加深理解(我觉得画的贼好,记不住就来打我). 模糊的原因 总的来说模糊的原因大致可分为以下三点: 1.canvas 的大小和 css 的大小不一致 首先让

随机推荐