一：使用缓存技术实现预绘制，减少重复绘制Canvs内容

很多时候我们在Canvas上绘制与更新，总是会保留一些不变的内容，对于这些内容

应该预先绘制缓存，而不是每次刷新。

直接绘制代码如下：

[javascript]  ontext.font="24px Arial"; 

context.fillStyle="blue"; 

context.fillText("Please press <Esc> to exit game",5,50); 

requestAnimationFrame(render); 

context.font="24px Arial";

context.fillStyle="blue";

context.fillText("Please press <Esc> to exit game",5,50);

requestAnimationFrame(render);

使用缓存预绘制技术：

[javascript]  function render(context) { 

    context.drawImage(mText_canvas, 0, 0); 

    requestAnimationFrame(render); 

} 

function drawText(context) { 

    mText_canvas = document.createElement("canvas"); 

    mText_canvas.width = 450; 

    mText_canvas.height = 54; 

    var m_context = mText_canvas.getContext("2d"); 

    m_context.font="24px Arial"; 

    m_context.fillStyle="blue"; 

    m_context.fillText("Please press <Esc> to exit game",5,50); 

} 

function render(context) {

 context.drawImage(mText_canvas, 0, 0);

 requestAnimationFrame(render);

}

function drawText(context) {

 mText_canvas = document.createElement("canvas");