首頁>Club>

node canvas如何提高作圖效能？

3
回覆列表
  • 1 # 多維的世界

    提高畫圖的效能，你需要了解以下幾點：

    1、預渲染

    錯誤程式碼：

    var canvas = document.getElementById("myCanvas");

    var context = this.canvas.getContext("2d");

    var drawAsync = eval(Jscex.compile("async", function () {

    while (true) {

    drawMario(context);

    $await(Jscex.Async.sleep(1000));

    }

    }))

    drawAsync().start();

    正確程式碼：

    var canvas = document.getElementById("myCanvas");

    var context = this.canvas.getContext("2d");

    var m_canvas = document.createElement("canvas");

    m_canvas.width = 64;

    m_canvas.height = 64;

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

    drawMario(m_context);

    var drawAsync = eval(Jscex.compile("async", function () {

    while (true) {

    context.drawImage(m_canvas, 0, 0);

    $await(Jscex.Async.sleep(1000));

    }

    }))

    drawAsync().start();

    2、儘量少呼叫canvasAPI

    錯誤程式碼：

    for (var i = 0; i < points.length - 1; i++) {

    var p1 = points[i];

    var p2 = points[i + 1];

    context.beginPath();

    context.moveTo(p1.x, p1.y);

    context.lineTo(p2.x, p2.y);

    context.stroke();

    }

    正確程式碼：

    context.beginPath();

    for (var i = 0; i < points.length - 1; i++) {

    var p1 = points[i];

    var p2 = points[i + 1];

    context.moveTo(p1.x, p1.y);

    context.lineTo(p2.x, p2.y);

    }

    context.stroke();

    3、儘量少改變canvas的狀態

    錯誤程式碼：

    for (var i = 0; i < STRIPES; i++) {

    context.fillStyle = (i % 2 ? COLOR1 : COLOR2);

    context.fillRect(i * GAP, 0, GAP, 480);

    }

    正確程式碼：

    context.fillStyle = COLOR1;

    for (var i = 0; i < STRIPES / 2; i++) {

    context.fillRect((i * 2) * GAP, 0, GAP, 480);

    }

    context.fillStyle = COLOR2;

    for (var i = 0; i < STRIPES / 2; i++) {

    context.fillRect((i * 2 + 1) * GAP, 0, GAP, 480);

    }

    4、重新渲染的範圍儘量小

    錯誤程式碼：

    context.fillRect(0, 0, canvas.width, canvas.height);

    正確程式碼：

    context.fillRect(20, 20, 100, 100);

    5、複雜場景使用多層畫布

    <canvas width="600" height="400">

    </canvas>

    <canvas width="600" height="400">

    </canvas>

    6、不要使用陰影

    context.shadowOffsetX = 5;

    context.shadowOffsetY = 5;

    context.shadowBlur = 4;

    context.shadowColor = "rgba(255, 0, 0, 0.5)";

    context.fillRect(20, 20, 150, 100);

    7、清除畫布

    一般情況下：clearRect的效能優於fillRect優於canvas.width = canvas.width;

    8、畫素級別操作儘量用整數

    9、使用Jscex製作動畫效果

    var drawAsync = eval(Jscex.compile("async", function () {

    while (true) {

    context.drawImage(m_canvas, 0, 0);

    $await(Jscex.Async.sleep(1000));

    }

    }))

    drawAsync().start();

    10、其它

    與渲染無關的計算交給worker，複雜的計算交給引擎（自己寫，或者用開源的），比如3D、物理。快取load好的圖片，canvas上畫canvas,而不是畫image。

    自己多積累經驗，使程式執行的消耗減少到最小就好的。

  • 2 # 多維的世界

    提高畫圖的效能，你需要了解以下幾點：

    1、預渲染

    錯誤程式碼：

    var canvas = document.getElementById("myCanvas");

    var context = this.canvas.getContext("2d");

    var drawAsync = eval(Jscex.compile("async", function () {

    while (true) {

    drawMario(context);

    $await(Jscex.Async.sleep(1000));

    }

    }))

    drawAsync().start();

    正確程式碼：

    var canvas = document.getElementById("myCanvas");

    var context = this.canvas.getContext("2d");

    var m_canvas = document.createElement("canvas");

    m_canvas.width = 64;

    m_canvas.height = 64;

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

    drawMario(m_context);

    var drawAsync = eval(Jscex.compile("async", function () {

    while (true) {

    context.drawImage(m_canvas, 0, 0);

    $await(Jscex.Async.sleep(1000));

    }

    }))

    drawAsync().start();

    2、儘量少呼叫canvasAPI

    錯誤程式碼：

    for (var i = 0; i < points.length - 1; i++) {

    var p1 = points[i];

    var p2 = points[i + 1];

    context.beginPath();

    context.moveTo(p1.x, p1.y);

    context.lineTo(p2.x, p2.y);

    context.stroke();

    }

    正確程式碼：

    context.beginPath();

    for (var i = 0; i < points.length - 1; i++) {

    var p1 = points[i];

    var p2 = points[i + 1];

    context.moveTo(p1.x, p1.y);

    context.lineTo(p2.x, p2.y);

    }

    context.stroke();

    3、儘量少改變canvas的狀態

    錯誤程式碼：

    for (var i = 0; i < STRIPES; i++) {

    context.fillStyle = (i % 2 ? COLOR1 : COLOR2);

    context.fillRect(i * GAP, 0, GAP, 480);

    }

    正確程式碼：

    context.fillStyle = COLOR1;

    for (var i = 0; i < STRIPES / 2; i++) {

    context.fillRect((i * 2) * GAP, 0, GAP, 480);

    }

    context.fillStyle = COLOR2;

    for (var i = 0; i < STRIPES / 2; i++) {

    context.fillRect((i * 2 + 1) * GAP, 0, GAP, 480);

    }

    4、重新渲染的範圍儘量小

    錯誤程式碼：

    context.fillRect(0, 0, canvas.width, canvas.height);

    正確程式碼：

    context.fillRect(20, 20, 100, 100);

    5、複雜場景使用多層畫布

    <canvas width="600" height="400">

    </canvas>

    <canvas width="600" height="400">

    </canvas>

    6、不要使用陰影

    context.shadowOffsetX = 5;

    context.shadowOffsetY = 5;

    context.shadowBlur = 4;

    context.shadowColor = "rgba(255, 0, 0, 0.5)";

    context.fillRect(20, 20, 150, 100);

    7、清除畫布

    一般情況下：clearRect的效能優於fillRect優於canvas.width = canvas.width;

    8、畫素級別操作儘量用整數

    9、使用Jscex製作動畫效果

    var drawAsync = eval(Jscex.compile("async", function () {

    while (true) {

    context.drawImage(m_canvas, 0, 0);

    $await(Jscex.Async.sleep(1000));

    }

    }))

    drawAsync().start();

    10、其它

    與渲染無關的計算交給worker，複雜的計算交給引擎（自己寫，或者用開源的），比如3D、物理。快取load好的圖片，canvas上畫canvas,而不是畫image。

    自己多積累經驗，使程式執行的消耗減少到最小就好的。

  • ∧ 中秋節和大豐收的關聯？
  • ∨ 老公不讓老婆碰他的車，該怎麼辦？