var can = document.getelementbyid(『canvas』);
//建立乙個畫布
var ctx = can.getcontext(『2d』);
html**：
js**：
var canvas = document.getelementbyid('canvas');
var ctx = canvas.getcontext('2d');
var ball =
};function draw()
if (ball.x + ball.vx > canvas.width-15 || ball.x + ball.vx < 15)
window.requestanimationframe(draw); //迴圈執行
}draw();
**我已經寫了基本的注釋，不難理解，簡單概括一下這個例項的實現思想：
建立乙個小球物件，包含乙個繪製自己的方法。在整個畫布中繪製這個小球，然後在下一次繪製之前，先清除整個畫布，改變小球的各個屬性（包含了邏輯，比如邊界的判斷），然後重新繪製一遍，從而達到了動起來的效果。
如果你把上面**中的ctx.clearrect(0,0, canvas.width, canvas.height);換成了下面這樣：
ctx.fillstyle = 'rgba(255,255,255,0.3)';
ctx.fillrect(0, 0, canvas.width, canvas.height);
如果我們想對乙個canvas畫布進行如下操作：獲取每乙個點的資訊，對每乙個座標點進行操作。那我們就需要了解一下imagedata物件了。
imagedata物件（由getimagedata方法獲取的）中儲存著canvas物件真實的畫素資料，它包含以下幾個唯讀屬性：
去建立乙個新的，空白的imagedata對像，你應該會使用createimagedata()方法：
var myimagedata = ctx.createimagedata(width, height);為了獲得乙個包含畫布場景畫素資料的imagedata對像，你可以用getimagedata()方法：
var myimagedata = ctx.getimagedata(left, top, width, height);myimagedata物件就有width、height、data三個屬性的值了。看下面這個例項：
html**：
hover處的顏色
實現的效果如下圖：
注意：如果有些同學試到這裡發現有這個報錯內容failed to execute 'getimagedata' on 'canvasrenderingcontext2d': the canvas has been tainted by cross-origin data.，需要檢查這行**：
img.src = "img_the_scream.jpg";不能是跨域位址。網上有一些解決辦法，這裡就不展開講了。
你可以用putimagedata()方法去對場景進行畫素資料的寫入。
ctx.putimagedata(myimagedata, x, y); //在畫布的(x, y)點開始繪製myimagedata所儲存的畫素資訊。var imagedata = ctx.getimagedata(0,0,canvas.width, canvas.height); //獲取imagedata
var colors = imagedata.data; //獲取畫素資訊
function invert()
ctx.putimagedata(imagedata, 220, 0); //從(220, 0)開始繪製改變過的顏色
}function togray()
ctx.putimagedata(imagedata, 440, 0); //從(440, 0)開始繪製改變過的顏色
} invert(); //反轉色
togray(); //變灰色
實現的效果如下圖：
瀏覽器為了達到抗鋸齒的效果會做額外的運算。為了避免這種情況，請保證使用canvas的繪製函式時，盡量用math.floor()函式對所有的座標點取整。比如：
ctx.drawimage(myimage, 0.3, 0.5); //不提倡這樣寫，應該像下面這樣處理
ctx.drawimage(myimage, math.floor(0.3), math.floor(0.5));
背景層（簡單變化）、遊戲層（時刻變化）。這個時候，我們就可以建立兩個畫布，乙個專門用來繪製不變的背景（少量繪製），另乙個用來繪製遊戲動態部分（大量繪製），就像這樣：
div+css的方法去替代ctx.drawimage()，這麼做可以避免在每一幀在畫布上繪製大圖。簡單講，dom渲染肯定比canvas的操作效能更高。
如果要對乙個畫布進行縮放，如果可以的話，盡量使用css3的transform來實現。總之，記住乙個原則，能用html+div實現的盡量不用js對canvas進行操作。
ok，canvas常用的api就基本總結完了，靠這些api已經足夠開發一些中型遊戲了。比如之前自己寫的***，就是用這些函式畫出來的。關鍵是這些函式的組合使用，多多聯絡就好了。
如果你把我之前的兩篇文章都看了的話，相信你會對canvas越來越感興趣。所以為了做乙個有始有終的人，我後續還會出一系列的關於canvas的例項，注意，是一系列！敬請期待！
Silverlight學習之 Canvas物件
首先canvas為silverlight提供的乙個布局元素之一。每個子物件都呈現在canvas區域中。通過指定x和y座標，可以控制物件在canvas中的定位。這些座標以為象素為單位。x和y座標通常使用canvas.left和canvas.top的附加屬性來指定。canvas.left 指定物件與包含...
poi匯出excel 之API整理
hssfworkbook wb new hssfworkbook hssfsheet sheet wb.createsheet hssfcellstyle setborder wb.createcellstyle 一 設定背景色 setborder.setfillforegroundcolor sh...
Canvas學習之基礎一
this.test1 document.getelementbyid test1 this.test1.width 1024 必須如此設定寬高 this.test1.height 900 let ctx1 if this.test1.getcontext 2d else ctx1.beginpath...