canvas 繪製好看的背景

2021-09-14 04:59:12 字數 1452 閱讀 1831

! function() 

//封裝方法,壓縮之後減少檔案大小

function get_by_tagname(name)

//獲取配置引數

function get_config_option() ;

}//設定canvas的高寬

function set_canvas_size()

//繪製過程

function draw_canvas()

}}), frame_func(draw_canvas);

}//建立畫布,並新增到body中

var the_canvas = document.createelement("canvas"), //畫布

config = get_config_option(), //配置

canvas_id = "c_n" + config.l, //canvas id

context = the_canvas.getcontext("2d"), canvas_width, canvas_height,

frame_func = window.requestanimationframe || window.webkitrequestanimationframe || window.mozrequestanimationframe || window.orequestanimationframe || window.msrequestanimationframe || function(func) , random = math.random,

current_point = ,

all_array;

the_canvas.id = canvas_id;

the_canvas.style.csstext = "position:fixed;top:0;left:0;z-index:" + config.z + ";opacity:" + config.o;

//初始化畫布大小

set_canvas_size(), window.onresize = set_canvas_size;

//當時滑鼠位置儲存,離開的時候,釋放當前位置資訊

window.onmousemove = function(e) , window.onmouseout = function() ;

//隨機生成config.n條線位置資訊

for (var random_lines = , i = 0; config.n > i; i++) );

}all_array = random_lines.concat([current_point]);

秒後繪製

settimeout(function() , 10);

}();

效果圖 

Canvas線段的繪製

moveto x,y lineto x,y linewidth 線條寬度 strokestyle 線條樣式 storoke 線條繪製 填充fillstyle 填充 fill 繪製填充 canvas提供的圖形繪製函式 rect x,y,width,height 定義矩形狀態 繪製矩形 fillrect...

Canvas繪製基礎

繪製畫素點 canvas.drawpoint float x,float y,paint paint canvas.drawpoints float pts,paint paint canvas.drawpoints f float pts,int offset,int count,paint pa...

Canvas 繪製文字

filltext text,x,y maxwidth 填充文字 stroketext text,x,y maxwidth 描邊文字 font font 10px sans serif 預設 text anchor start 預設,文字對齊界線開始的地方 左對齊指本地從左向右,右對齊指本地從右向左 ...