我們發(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)膜楷，效果更好旭咽。
