JS Canvas實現2D之點線篇

概要：HTML5 是目前正在討論的新一代 HTML 標準，它代表了現在 Web 領域的最新的發展方向。在 HTML5 標準中，加入了新的多樣的內容描述標籤，直接支持表單驗證，視頻和音頻標籤，網頁元素的拖拽，離線存儲，工作線程等等。當然，其中一個最令人激動的新特性就是新的標籤類型 Canvas，開發人員可以通過該標籤，在網頁上直接用腳本進行繪圖，產生各種 2D 渲染的效果。所以有人預言，HTML5 將是 Flash 和 Silverlight 的“殺手”。從 Firefox 1.5 開始就已經支持 Canvas，Safari 也是很早就開始支持 Canvas。新的瀏覽器比如 Chrome 也是從一開始就支持。但遺憾的是，到目前爲止，IE 一直不支持該標準。
HTML 5 引入了新的的網頁元素：<canvas>。Canvas 是一片空白的繪圖區域，網頁開發者可以利用 JavaScript 在該區域中自由地進行 2D 繪圖。常見的在canvas中顯示自己定義格式的字體，點、線、等具體2D、3D模型，圖片的效果處理等等，具體實現可見canvas相關文檔。
文歸正題，前段時間在我的項目中也需要js在頁面中做出一些2D圖像效果，我查看了很多關於canvas的文檔，但是由於IE不支持統統都得放棄。關於這個功能很是可惜，但是由於我們公司項目基本基於IE實現，難道IE就不支持js 2D作圖，答案顯然是否定的，通過對網友一段精彩的js函數的修改，實現了我要的效果，在頁面上進行2點畫線，實現工程圖2點測距的功能，這裏我對其思路方法進行簡單總結：
A.創造canvas，可以指定一頁面對象爲canvas，並定義其大小樣式：
/**
* 用指定的id, 長和寬構造一個畫板
*
* @param id html元素的id
* @param w 指定的畫板寬度
* @param h 指定的畫板高度
*/
var Canvas = function(id, w, h) {
// 只想Canvas實例,以修正this指針的引用錯誤.
var self = this;
// 緩衝器
var cache = [];
// 畫板綁定到的html元素的引用
var canvas = document.getElementById(id);
// 畫板底色, 默認爲淺灰色
var bgColor = "lightgray";
// 筆刷的顏色, 默認爲黑色
var fgColor = "black";
// 原點座標, 初始爲(0, 0)
var oX = 0, oY = 0;
// 是否允許點畫到畫板邊界以外
var allowOutside = false;
// 渲染html元素
canvas.onselectstart = function() {return false;}
canvas.style.overflow = "hidden";
canvas.style.background = "lightblue";
canvas.style.width = (w ? w : 400) + "px";
canvas.style.height = (h ? h : 400) + "px";
……
}

B. 定義好canvas，然後就是作圖，畫布上所有的對象的基礎對象就是點，所有的對象都是由點所組成的，完成了點的處理，就成功了一半：定義點，畫點然後畫線：
/*
* 在給定的座標出畫點
*
* @param x x座標
* @param y y座標
*/
this.point = function(x, y) {
var pos = self.pos();
var size = self.size();
x = pos.x + oX + x;
y = pos.y + oY + y;

// 如果不允許在邊界外顯示點,則不講該點推入緩存
if (!allowOutside
&& !((x >= pos.x && x <= pos.x + size.width)
&& (y >= pos.y && y <= pos.y + size.height)))
return;
cache.push("<span name= 'pointxxx' style='width:1px;height:1px;position:absolute;left:" + x +"px;top:" + y + "px;background-color:" + fgColor + ";font-size:0px;z-index:999;'></span>");
}
/**
* 數值微分法畫直線
*
* @param x0 起點x座標
* @param y0 起點y座標
* @param x1 終點x座標
* @param y1 終點y座標
*/
function line_DDA(x0, y0, x1, y1) {
var px = x0, py = y0;
var dx = x1 - x0;
var dy = y1 - y0;
var incX = 0, incY = 0;
var epsl = Math.abs(dx) > Math.abs(dy) ? Math.abs(dx) : Math.abs(dy);
incX = dx / epsl;
incY = dy / epsl;
for (var i = 0; i < epsl; i++) {
self.point(parseInt(px + 0.5), parseInt(py + 0.5));
px += incX;
py += incY;
}
}
/**
* 用給定的起點和終點座標畫直線
*
* @param x0 起點x座標
* @param y0 起點y座標
* @param x1 終點x座標
* @param y1 終點y座標
*/
this.line = function(x0, y0, x1, y1) {
line_DDA(x0, y0, x1, y1);
}
/**
* 清空畫板
*/
this.clear = function() {
cache = [];
canvas.innerHTML = "";
}
/**
* 清空直線
*/
this.clearPoint = function() {
//alert(canvas.innerHTML)
var p2 = getElementsByName1("span","pointxxx");

//alert(p2.length)
for(var i=0;i<p2.length;i++)
canvas.removeChild(p2[i]);
}
其實點畫好了，是他的平面對象都是根據數學模型及循環知識由點拼出，這裏就不一一列舉。這裏我就將我運用以上js做出的2點畫線效果：
<div id='canvas' onclick = 'doPoint()'> //指定div對象爲畫布對象，並賦函數
<script>
function doPoint(){
points = points +1;
if(points%2!=0){
gc.clearPoint(); //清空點痕
x0 = GetPositionX();
y0 = GetPositionY();
gc.point(x0,y0);//畫點
gc.paint();
}else if(points%2==0){
x1 = GetPositionX();
y1 = GetPositionY();
gc.point(x1,y1);
gc.paint();
gc.fgColor("red");//設置點色
gc.line(x0,y0,x1,y1);
gc.paint();//畫布實現
alert(GetDistance(x0,x1,y0,y1));
}

}
</script>
初始化：
function Onload() {
gc = GCanvas("canvas", 600, 600);
gc.bgColor("black");
gc.paint();
}
看效果：
見附件