基於canvas寫乙個字的效果

2021-07-25 14:06:14 字數 2009 閱讀 9203

頁面html:

您的瀏覽器不支援canvas

//寫字區域

清 除

頁面css:

#canvas

#controller

.op_btn

.op_btn:hover

.clearfix

.color_btn

.color_btn:hover

.color_btn_selected

#black_btn

#blue_btn

#green_btn

#red_btn

#orange_btn

#yellow_btn

頁面js:

var canvaswidth = math.min( 800 , $(window).width() - 20 );//如果螢幕小於800px,則取值為螢幕大小寬度,便於移動端的展示,-20是為了使得公尺字格不緊貼於邊緣

var canvasheight = canvaswidth;

var strokecolor = "black";

var ismousedown = false; //滑鼠按下時候的狀態

var lastloc = ; //滑鼠上一次結束時的位置

var lasttimestamp = 0; //上一次時間,與筆刷粗細有關

var lastlinewidth = -1; //筆刷粗細

var canvas = document.getelementbyid("canvas");

var context = canvas.getcontext("2d");

canvas.width = canvaswidth;

canvas.height = canvasheight;

$("#controller").css("width",canvaswidth+"px");

drawgrid();//畫公尺字格

$("#clear_btn").click(

function(e)

)$(".color_btn").click(

function(e)

)//適用於移動端觸控

function beginstroke(point)

function endstroke()

function movestroke(point)

canvas.onmousedown = function(e) );

};canvas.onmouseup = function(e);

canvas.onmouseout = function(e);

canvas.onmousemove = function(e))

}};canvas.addeventlistener('touchstart',function(e) )

});canvas.addeventlistener('touchmove',function(e));

}});canvas.addeventlistener('touchend',function(e));

var maxlinewidth = 30;

var minlinewidth = 1;

var maxstrokev = 10;

var minstrokev = 0.1;

function calclinewidth( t , s )

if( lastlinewidth == -1 )

return resultlinewidth;

return resultlinewidth*1/3 + lastlinewidth*2/3;

}function calcdistance( loc1 , loc2 )

function windowtocanvas( x , y )

}function drawgrid()

累就乙個字

最近也學了一把跳槽,新公司坐落在北師大校園裡,環境是一流,可惜就是遠過頭了,一天就要浪費兩個小時在車上,比以前還慘。值得安慰的是公司坐落在學校裡,每天在校園裡看到那些青春活力的學生,也會覺得自己年輕了好幾歲,感覺非常棒。最重要的是北師大靚女成群,真是大飽眼福啊 別鄙視咱,哪個男人不喜歡欣賞美女,除非...

愛就乙個字

撥開天空的烏雲 像藍絲絨一樣美麗 我為你翻山越嶺 卻無心看風景 我想你身不由己 每個念頭有新的夢境 但願你沒忘記 我永遠保護你 不管風雨的打擊 全心全意 兩個人相互輝映 光芒勝過夜晚繁星 我為你翻山越嶺 卻無心看風景 我想你鼓足勇氣 憑愛的地圖散播訊息 但願你沒忘記 我永遠保護你 從此不必再流浪找尋...

mybati查詢乙個字段出現的是另乙個欄位的值

使用mybatis的時候,查詢列表進行展示,joint bank number欄位總是為空 但是area欄位是沒有資料的,確有資料,很奇怪 最後我只查詢joint bank number欄位,發現,除了area欄位,所有的字段都是空,但是我查的是joint bank number欄位啊,然後我就在考...