canvas構建乙個平面直角座標系

2022-01-30 00:57:37 字數 2578 閱讀 2316

功能:

1:可設定只顯示某個象限(onlyquadrant)

2:可設定刻度大小(setcalibration)

3:可設定放大比例(setproportion)

可呼叫的方法(包括上面3個):

向座標系列印一點 (printpoint)

在座標畫一條直線(printline)

設定下一畫筆的填充色(setfillcolor)

設定下一畫筆的邊框色(setstrokecolor)

獲取某個座標的真實x座標(getx)

獲取某個座標的真實y座標(gety)

例子:原始碼:

/*

* 平面直角座標系類

可以輕鬆在一塊畫布上畫出平面直角座標系,可設定寬度,高度,繪製比例,以及單位刻度

建構函式 : flatsystem

context: 畫布的2d上下文

width:繪製的最大寬度

height:繪製的最大高度

屬性設定:

this.calibration=30 //刻度 可通過 setcalibration(number) 設定 ,這個方法也是對外api之一

this.proportion=2 //繪製比例 可通過 setproportion(number) 設定這個方法也是對外api之一

api:

setcalibration(number);// 設定座標系刻度

setproportion();// 設定座標系繪製比例

init();//在畫布上畫出座標系,如果在init之前沒有設定刻度和繪製比例會使用預設的值

clear(x,y,width,height)//清除畫布的某塊區域,如果不傳遞任何值會清空全部畫布

*/function

flatsystem(context, width, height)

flatsystem.prototype =,

clear:

function

(x, y, width, height),

setproportion:

function(proportion),

setcalibration:

function

(calibration),

onlyquadrant:

function(quadran)

if(quadran == 1)

if(quadran == 2)

if(quadran == 3)

if(quadran == 4)

},/**

在座標系統列印乙個點

x 軸座標

y 軸座標

width 點的寬度

height 點的高度

*/printpoint:

function(x,y,width,height)

return

false

; },

/***

在座標系中畫一條直線(線段)

x 線段結束點 x座標

y 線段結束點 y座標

sx 線段開始點 x座標 可選 不傳遞將會使用上次畫筆結束點

sy 線段開始點 y座標 可選

*/printline:

function

(x, y, sx, sy),

/**設定填充色

*/setfillcolor:

function

(color),

/**設定邊框色

*/setstrokecolor:

function

(color),

/**非公開

*/drawrect:

function

(x,y,width, height),

/***

非公開在畫布列印乙個點,座標為真實開始座標和結束座標

*/drawline:

function(x, y, sx, sy)

this

.context.lineto(x, y);

this

.context.stroke();

},filltext:

function

(text, x, y),

build:

function(),

buildcoordinate:

function() :

function(x);

var j=0;//

中間變數

var d = 0;

var sx=0;

var sy=0;

this.context.textbaseline = "middle";

this.setfillcolor('#d8d8d8');

for(var i=1; i<=len;i++)

},isin:

function

(x, y),

/**獲取真實x座標

*/getx:

function

(x),

/**獲取真實x座標

*/gety:

function

(y)};

乙個canvas中strokeStyle的疑問

這個效果是圓弧是紅色,但是如果strokestyle在後面,就不會顯示紅色。為什麼?cans.linewidth 10 cans.stroke cans.strokestyle red canvas中的常用命令 canvas畫布設定width和height,裡面的xy是相對畫布的左上角開始0,0.l...

Canvas 實現乙個時鐘

使用canvas實現另乙個小時鐘,效果圖如下 前端html canvas not supported 下面是example.js的具體實現 var canvas document.getelementbyid canvas var context canvas.getcontext 2d var f...

構建乙個 synchronized

校對 智多芯 定稿 numbbbbb,cmb synchronized在 objective c 中是一種控制結構。它接受乙個物件指標作為引數,後面跟著一段 塊。物件指標充當鎖,在任何時候 synchronized 塊中只允許有乙個執行緒使用該物件指標。這是一種使用鎖進行多執行緒程式設計的簡單方法。...