本文实例讲述了javascript实现通过表格绘制颜色填充矩形的方法。分享给大家供大家参考。具体如下: <html><head><title> Javascript画矩形 </title><script type="text/javascript">//定义函数,传入设置参数,返回一个有背景颜色的表格function drawFilledRect(x,y,w,h,color){document.write("<table border=0 cellspacing=0 cellpadding=0><tr><td style=position: absolute; left: "+(x)+"; top: "+(y)+";background-color: "+...
一句话说明:用有限的代码构建一个1024*1024的颜色矩阵,秀出你的编程&艺术之美 起源于 stackexchange 上的一个问题, 这里稍微做了一下扩展,支持更多编程语言,并放宽了代码长度的限制。 规则 目标: 通过实现 模版 中的一个函数 get_color_at(x, y) ,在一个 1024*1024 的画布上画出尽可能 “有意思” 的图案。 参数: int x, int y ,取值均为 0 - 1023,对应画布上坐标点,左上角为起始点 (0,0) 返回: int r, int g, int b, ...
在一个项目研发过程中,需要显示账户的资金情况,为了给客户良好的体验我们采用了柱状图形展现,绘图的过程如果使用原生态脚本绘制这样比较麻烦,时间也会比较长,所以我们选择了jqPlot插件进行绘制,这样可以节省大量的时间,也能很快就能展示给用户。插件官方地址:http://www.jqplot.com/具体实现如下:引用JS文件:代码如下: <link href="~/Scripts/asset/jqplot/jquery.jqplot.min.css" rel="stylesheet" /> <link href="~/...
Javascript 绘制 sin 曲线代码如下: <!DOCTYPE html> <html> <head> <style type="text/css"> #MyCanvas { background-color: cornflowerblue; } </style> <script type="text/javascript"> function draw(){ var my_canvas = document.getElementById( "MyCanvas" ); var content = my_canvas.getContext( "2d" ); content.beginPath(); content.moveTo( 10, 100 ); for( var i = 1; i < 200; i += 0.1 ){ var x ...
最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作。在本文中,我给大家分享如何使用js来完成地图交互。 先简单介绍下raphael.js,raphael.js是一个很小的javascript库,它可以在网页中实现绘制各种矢量图、各类图表、以及图像裁剪、旋转、运动动画等等功能。此外raphael.js还跨浏览器兼容,而且还兼容老掉...
1、inserRow()和insertCell()函数 insertRow()函数可以带参数,形式如下: insertRow(index):index从0开始 这个函数将新行添加到index的那一行前,比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于insertRow(-1),将新行添加到表的最后。一般我们在使用的时候都是:objTable.insertRow(objTable.rows.length).就是为表格objTable在最后新增一行。 insertCell()和insertRow的用法相同,这里就不再说了。 2...
1.先写一个<table>,中间放入<tbody>,但是<tbogy>什么也不加 如何使用js在页面中绘制表格 2.在js中写入方法,绘制表格 如何使用js在页面中绘制表格 其核心语句就是: var row=document.createElement_x("tr"); 就是创建行 var cell=document.createElement_x("td"); 就是创建列 cell.appendChild(document.createTextNode(message)); 就是向列的每一个小格添加子节点和内容(必写) row.appendChild(cell); 就是将每一列(一个小...
一:什么是SVG SVG是1999由W3C发布的2D图形描述语言,纯基于XML格式的标记语言,SVG的 全称是可扩展的矢量图形跟传统的Raster方式的图形(JPG, PNG, GIF等)有很大的差 别。SVG是2D图形开发平台,包括两个部分,一个是基于XML语言的数据描述,另 外一部分是可编程的API,其关键特性支持图形,文本,梯度填充,画笔风格,图形 特效滤镜如高斯模糊,会在稍后的代码中演示。同时还支持各种鼠标事件与DOM部 分API。几乎所有的主流浏览器都...
Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库。它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表,还可以绘制任意形状的图形,可以进行图表或图像的裁剪和旋转等复杂操作。 Raphal 是跨浏览器的矢量图形库,目前支持的浏览器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Explorer 6.0+。 如何使...
jqplot是基于一个基本的jqplot.js文件,并有多个js文件支持的插件——也就是说jqplot.js文件只能支持线状图的绘制,对于饼状图,柱状图等图形需要引入pieRenderer.js等文件。 这里参照jqPlot的官方文档,以饼状图为例简单的说一下jqPlot的用法: 第一步,引入js文件(如果是画线状图之外的其他图表,需要引入相关js文件,这里引入饼状图文件pieRenderer) 代码如下:<!--[if IE]><script language="javascript" type="text/javascr...
如果不考虑把整个代码封装起来, 大约5分钟里也可以写出类似的效果,为了把整个代码封装成一个对象,稍微借鉴了Pro Javascript Techniques书中的代例子的风格。Pro Javascript Techniques书中推荐的drag and drop 例子:http://boring.youngpup.net/2001/domdragRect var Rect = { //当前正在画的矩形对象 obj: null, //画布 container: null, //初始化函数 init: function(containerId){ Rect.container = document.getElem...
绘图对象Plot,包含了JS画点,JS画线,JS画正弦sin,JS画余弦cos,tan,圆,多边形。 可设置原点位置,画笔颜色,画笔粗细,坐标线颜色。 其实原理很简单,用长1px宽1px的div模拟点,由点及线,由线及面。 贴上来权当相互学习,以免JS新手觉得js画图是多神秘的事情。JS绘制数学函数图 body{ margin: 0px; padding: 0px; } //辅助函数 function $(id){return document.getElementById(id)}; /** * 绘图对象 * 包含各个绘图函数...
这篇文章主要介绍了js+html5绘制图片到canvas的方法,涉及html5元素操作的相关技巧,需要的朋友可以参考下本文实例讲述了js+html5绘制图片到canvas的方法。分享给大家供大家参考。具体实现方法如下:<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the HTML5 canvas tag. </canvas> <script type="text/javascript"> var c=docum...
流星雨…… 熟悉HTML5的朋友们应该知道HTML5具有强大的绘图和渲染能力,HTML5配合js的使用比起svg等技术有过之而无不及,而且HTML5图形开发过程也比较简单。 绘制动态的图形算是动画了,当然可以利用Flash实现,但是需要插件支持。下面就简单介绍下HTML5编写动画的过程。 首先:先不讲技术的东西,说说技术与艺术。我觉得在IT领域技术好而缺乏艺术创意,是个好员工,难听点叫代码民工;具有一定艺术创造能力才可能实现技术...
这篇文章主要为大家详细介绍了js HTML5 canvas绘制图片的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了HTML5 canvas绘制图片的具体代码,供大家参考,具体内容如下demo.jswindow.onload=function() {createcanvas();drawImage(); }function createcanvas() {var CANVAS=document.getElementById(mycanvas);context=CANVAS.getContext(2d);}function drawImage() {var img=new Image();img.onload=f...