我們發(fā)現(xiàn)很多動(dòng)效都和canvas有關(guān),我們可以繪制一塊canvas作為背景泛释,可以和canvas動(dòng)畫相聯(lián)系,下面我們就繪制一塊移動(dòng)的小圓點(diǎn)動(dòng)效圖。
在HTML上canvas只需要一句話來展示泻拦,因此canvas的動(dòng)畫效果主要通過js來實(shí)現(xiàn)。在HTML上:
為了使canvas和頁面上其他組件一同顯示忽媒,且不影響頁面其他組件展示争拐,我們將canvas的position設(shè)置成fixed:
1、在js中晦雨,先獲取畫布:var?canvas?=?document.getElementById('myCanvas');
2架曹、渲染上下文:元素創(chuàng)造了一個(gè)固定大小的畫布,它公開了一個(gè)或多個(gè)渲染上下文闹瞧,其可以用來繪制和處理要展示的內(nèi)容绑雄。我們將會(huì)將注意力放在2D渲染上下文中:var?ctx=canvas.getContext('2d');我們可以根據(jù)這個(gè)ctx來判斷瀏覽器是否支持canvas。
3奥邮、初始化數(shù)據(jù)万牺,設(shè)置canvas的大小:我們將寬高設(shè)置成頁面的寬高:
4洽腺、為了使小圓點(diǎn)不那么單調(diào)脚粟,我們?cè)O(shè)置了彩色效果,定義了一些函數(shù)來設(shè)置顏色:
5蘸朋、我們創(chuàng)建的每一個(gè)函數(shù)核无,都可以有一個(gè)prototype屬性,該屬性指向一個(gè)對(duì)象藕坯。這個(gè)原型對(duì)象团南≡肷常可以根據(jù)自己的需求,選擇性的將一些屬性和方法通過prototype屬性已慢,掛載在原型對(duì)象通過這個(gè)屬性曲聂,讓實(shí)例對(duì)象也能夠訪問原型對(duì)象上的方法,繪制方法掛載到點(diǎn)對(duì)象上:
6佑惠、圓點(diǎn)生成以及移動(dòng):
7朋腋、最后將動(dòng)畫效果設(shè)置上去:
如果使用這樣的canvas作為背景,會(huì)看起來更加生動(dòng)膜楷,效果更好旭咽。