JavaScript与Java生成N*N阶方格图的四种方式

想要生成N*N7方格图在浏览器页面显示，解决策略是浏览器端之间生成和服务器端生成后返回到前端。

具体效果图如下图canvas：

说明：格子图有红色格子和黑色格子组成，红色默认颜色，黑色是对要特殊显示个格子做出标记。

生成九宫格的图案，想了四种方式，美国空间，JavaScript实现了三种，Java实现一种。

1.JavaScript生成Table的方式产生方格子。

生成效果图table:

源代码：

//表格生成function drawTable(edge, n) {var size = edge / n;var sb = new StringBuffer();sb.append(“<table bgcolor=’red’>”);for (var i = 0; i < n; i++) {sb.append(“<tr>”);for (var j = 0; j < n; j++) {var p = i + ” + j;sb.append(“<td “);if (point.contains(p)) {sb.append(” bgcolor=’#000000′ >”);} else {sb.append(” bgcolor=’#FFFFFF’ >”);}sb.append(“</td>”);}sb.append(“</tr>”);}sb.append(“</table>”);document.getElementById(“div”).innerHTML = sb.toString();}

说明:参数edge:表示Table的width和height的像素，n表示正方形Table中一行的小格子数目。

2.JavaScript通过span标签组合和纯色图片生成方格。

生成效果图span:

源代码：

说明：参数同上。

使用两种纯色width==height的图片，并且有不同的像素，生成策略将根据一行的小格子数量来决定使用不同像素的图片。

3.使用HTML的Canvas功能绘制。

效果图参见本文第一幅图canvas.

源代码：

//HTML5Canvas绘制function drawCanvas(edge, n) {document.getElementById(“div”).innerHTML=””;var size = edge / n;canvas=document.getElementById(“canvas”);canvas.setAttribute(“height”, edge);canvas.setAttribute(“width”, edge);cxt=canvas.getContext(‘2d’);cxt.strokeStyle=”rgb(255, 255, 255)”;for(var i=0; i<n; i++){for(var j=0; j<n; j++){var p=i+””+j;if(point.contains(p)){cxt.fillStyle=”rgb(0, 0, 0)”;}else{cxt.fillStyle=”rgb(255, 0, 0)”;}cxt.fillRect(size*j,size*i,size,size);cxt.strokeRect(size*j,size*i,size,size);}}}

说明：参数同上。

fillRect(x,y,w,h);绘制填充的矩形

strokeRect(x,y,w,h);绘制线条的矩形

上面两次反复绘制矩形，通过fillRect和strokeRect方法使的绘制的方格具有填充色和边框。

使用HTML5的Canvas绘制则需要支持HTML5的浏览器支持。

4.使用Java的生成N*N阶的方格图片

效果图:

关键代码：

BufferedImage bimage = new BufferedImage(edgePixel * n, edgePixel * n,BufferedImage.TYPE_INT_RGB);Graphics2D g2d = bimage.createGraphics();g2d.getDeviceConfiguration().createCompatibleImage(edgePixel * n, edgePixel * n,Transparency.TRANSLUCENT);g2d.dispose();g2d = bimage.createGraphics();

第一步：图片缓冲区对象创建，BufferedImage.

第二步：二维绘图画笔，获取Graphics接口的实现类Graphics2D对象

第三步：设置画笔的线条颜色，背景颜色等属性

第四步：绘制图形，API中提供的相应的绘制方法

第五步：将将图片缓存去中的内容通过图像文件输出流写入到文件。

如下代码所示：

FileImageOutputStream fios = new FileImageOutputStream(new File(imageName));ImageIO.write(bimage, IMAGE_TYPE.substring(1), fios);

说明：IMAGE_TYPE字符串表示的是输出图像的文件类型，如:png,jpeg,gif,bmp

上述JavaScript和Canvas生成图形过程中使用了StringBuffer这个对象和Array对象的contains方法源代码参见附件：CellTable生成图像演示文件CellTable.html.txt使用时去掉后缀[.txt].

说起生成N*N阶方格，美国服务器，并且突出显示其中指定的格子源于以前的两篇文章中提到的寻找图案单位问题。

文章：

本文出自 “野马红尘” 博客，谢绝转载！

人之所以有一张嘴，而有两只耳朵，原因是听的要比说的多一倍。

相关文章：

你感兴趣的文章：

标签云：