1.例子：
2.填充矩形區域
context.fillrect(x,y,w,h); //填充矩形區域，設定引數
context.strokerect(x,y,w,h); //矩形區域邊界繪製
context.clearrect(x,y,w,h); //橡皮擦，將矩形區域內內容擦除
3.顏色指定方式（紅色為例）
#ff0000、#f00、rgb(255,0,0)、rgb(100%,0%,0%)、rgba(255,0,0, 1.0)、rgba(100%,0%,0%, 1.0)、hsl(0,100%,50%)、hsla(0,100%,50%, 1.0) 、red等等。
4.陰影效果
context.shadowoffsetx = 2.0;
context.shadowoffsety = 2.0;
context.shadowcolor = "rgba(50%,50%,50%,0.75)"; //陰影顏色
context.shadowblur = 2.0; //模糊程度
5.填充效果
漸變色效果又分為線性漸變、中心區域漸變。
線性漸變：
var lingrad = context.createlineargradient(0,450,1000,450); // 起始位置到截止位置
lingrad.addcolorstop(0.0,'red'); //漸變中節點
lingrad.addcolorstop(0.5,'yellow');
lingrad.addcolorstop(0.75,'orange');
lingrad.addcolorstop(1.0,'purple');
context.fillstyle = lingrad; //應用到圖形上
context.fillrect(0,450,1000,450);
中心區域漸變：
var radgrad = context.createradialgradient(260,320,40,200,400,200); //定義漸變區域(x0,y0,r0,x1,y1,r1)
radgrad.addcolorstop(0.0,'yellow'); //定義節點
radgrad.addcolorstop(0.9,'orange');
randgrad.addcolorstop(1.0,'rgba(0,0,0,0)');
context.fillstyle = radgrad; // 定義填充物件
context.fillrect(0,200,400,400);
6.手繪
context.beginpath();
context.moveto(300,700);
context.lineto(600,100);
context.lineto(900,700);
context.moveto(350,400);
context.lineto(850,400);
context.stroke();
繪製過程：開始繪製beginpath() --->定義所有節點---> 用stroke實現繪製。
繪製拋物線：context.quadraticcurveto(cpx,cpy,x,y)
貝塞爾曲線：context.beziercurveto(cp1x,cp1y,cp2x,cp2y,x,y)
自定義曲線：context.arcto(x1,y1,x2,y2,radius)
以弧度座標標定義弧：context.arc(x,y,radius,startangle,endangle,anticlockwise)
HTML5學習筆記（四）
html5 canvas 續 一 替代內容 在訪問頁面時，如果瀏覽器不支援canvas元素，那麼就需要提供乙份替代 來告知訪問者出現的問題。下面這段 就是實現這一功能 update yourbrowser tp enjoy canvas 在不支援canvas的ie8.0中開啟，效果如下 二 檢測瀏覽...
html5學習筆記（四）
在設計網頁過程中，我們元素之間必不可少的要使用到定位屬性，來進行元素的布局 常常在我們一開始布局時會使用 padding 0px margin 0px 等等 來進行全域性元素的一些初始化 在定位屬性中常常使用為 position relative 相對定位 占有空間，能使以它為絕對定位的屬性做參照物...
HTML5學習之 HTML 5 拖放
拖放 drag 和 drop 是 html5 標準的組成部分。拖放是一種常見的特性，即抓取物件以後拖到另乙個位置。在 html5 中，拖放是標準的一部分，任何元素都能夠拖放。internet explorer 9 firefox opera 12 chrome 以及 safari 5 支援拖放。注釋...