实现的效果参见我之前的OpenGL实现的效果，不过这里的坐标系原点在左上角(懒得改Orz...)。然后这里的是纯HTML+JavaScript实现的，在setScreen()函数里写过程就OK了0.0，setpixel的第三个参数是一个整数作为RGB，其余的你懂0.0 不过算法代码要稍微更改成JS的语法0.0 贴代码，直接保存到文件运行即可：
Canvas.html: <!-- Author: SpringHack - springhack@live.cn Last modified: 2016-04-05 12:53:18 Filename: Canvas.html Description: Created by SpringHack using vim automatically. --> <!DOCTYPE html> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" /> <title>Canvas</title> <script language='javascript' src='js/canvas.js'></script> <script language='javascript' src='js/main.js'></script> </head> <body> <center> <canvas id='canvas'></canvas> </center> </body> </html>
js/canvas.js, 我实现的兼容库: /** Author: SpringHack - springhack@live.cn Last modified: 2016-04-05 12:46:00 Filename: canvas.js Description: Created by SpringHack using vim automatically. **/ //Config part var Config = { width : 500, height : 500 }; //Define colors var WHITE = 0xffffff, BLACK = 0x000000, GREEN = 0x00ff00, BLUE = 0x0000ff, RED = 0xff0000, ORANGE = 0xee7600, PINK = 0xee00ee; //Define default function function setScreen () {}; //Define main functions (function (window, undefined) { window.onload = function () { var buffer = []; var canvas = document.getElementById('canvas'); canvas.width = Config.width; canvas.height = Config.height; var context = canvas.getContext('2d'); var getRGB = function (c) { var str = '#'; var cc = []; cc[0] = ((c & 0xFF0000) >> 16).toString(16); cc[1] = ((c & 0xFF00) >> 8).toString(16); cc[2] = (c & 0xFF).toString(16); for (var i=0;i<3;++i) { if (cc[i].length == 1) cc[i] = '0' + cc[i]; str += cc[i]; } return str; }; window.putpixel = function (x, y, c) { if (!buffer[x]) buffer[x] = []; buffer[x][y] = c; context.beginPath(); context.moveTo(x, y); context.strokeStyle = getRGB(c); context.lineTo(x + 1, y + 1); context.stroke(); }; window.getpixel = function (x, y) { if (buffer[x][y]) return buffer[x][y]; return 0xffffff; }; setScreen(); }; })(window);
js/main.js, 主要的代码实现，改这个就OK了0.0: /** Author: SpringHack - springhack@live.cn Last modified: 2016-04-05 12:40:06 Filename: main.js Description: Created by SpringHack using vim automatically. **/ //直线生成算法 function DDALine (x0,y0,x1,y1,color) { var x; var dx, dy, y, k; dx = x1 - x0, dy = y1 - y0; k = dy/dx, y = y0; for (x=x0;x<=x1;x++) { putpixel (x, parseInt(y+0.5), color); y = y + k; } } function MidpointLine (x0,y0,x1, y1,color) { var a, b, d1, d2, d, x, y; a = y0 - y1, b = x1 - x0, d = 2 * a + b; d1 = 2 * a, d2 = 2 * (a + b); x = x0, y = y0; putpixel(x, y, color); while (x<x1) { if (d<0) { x++, y++, d += d2; } else { x++, d+=d1; } putpixel(x, y, color); } } function Bresenhamline(x0,y0,x1, y1,color) { var x, y, dx, dy; var k, e; dx = x1 - x0, dy = y1 - y0, k = dy/dx; e = -0.5, x = x0, y = y0; for (i=0;i<=dx;++i) { putpixel(x, y, color); x = x + 1; e = e + k; if (e>=0) { y++, e = e - 1; } } } //圆生成算法 function CirclePoints(xx, yy, x, y, color) { putpixel(xx + x, yy + y, color); putpixel(xx + y, yy + x, color); putpixel(xx - x, yy + y, color); putpixel(xx + y, yy - x, color); putpixel(xx + x, yy - y, color); putpixel(xx - y, yy + x, color); putpixel(xx - x, yy - y, color); putpixel(xx - y, yy - x, color); } function MidPointCircle(xx, yy, r, color) { var x, y; var d; x = 0; y = r; d = 1.25 - r; CirclePoints(xx, yy, x, y, color); //��示圆弧上的八个对称点 while(x <= y) { if(d<0) d += 2 * x + 3; else{ d += 2 * (x - y) + 5; y--; } x++; CirclePoints(xx, yy, x, y, color); } } //区域填充算法 function FloodFill4(x, y, oldcolor, newcolor) { if(getpixel(x,y) == oldcolor) { putpixel(x, y, newcolor); FloodFill4(x, y + 1, oldcolor, newcolor); FloodFill4(x, y - 1, oldcolor, newcolor); FloodFill4(x - 1, y, oldcolor, newcolor); FloodFill4(x + 1, y, oldcolor, newcolor); } } //程序入口函数 function setScreen() { //画直线 DDALine(0, 0, 100, 100, BLUE); MidpointLine(100, 100, 200, 200, RED); Bresenhamline(200, 200, 300, 300, BLACK); //画圆 MidPointCircle(150, 150, 70, GREEN); //区域填充 - 1 MidPointCircle(220, 50, 40, PINK); FloodFill4(220, 50, WHITE, PINK); //区域填充 - 2 FloodFill4(150, 160, WHITE, ORANGE); }
打包下载地址：https://pan.baidu.com/s/1skNRSSX