HTML5canvas双缓冲_测试

1、HTML5 canvas drawImage() 方法

http://www.w3school.com.cn/tags/canvas_drawimage.asp

　　1.1、HTML 5 canvas strokeStyle 属性

　　　　http://www.w3school.com.cn/tags/canvas_strokestyle.asp

2、测试代码：

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">

<script type="text/javascript" >

    // ZC: 缓冲画布
    var g_canvasBuffer = null;
    var g_canvasBufferContext = null;
    var g_iWidth = 800;
    var g_iHeight= 600;

    window.onload = function()
    {
    // *** *** ***
        // ZC: 网页上的<canvas/>控件
        var canvas = document.getElementById("idCanvas");
        var canvasContext = canvas.getContext("2d");
        canvas.Width = g_iWidth;
        canvas.Height= g_iHeight;

    // *** *** ***
        // ZC: 缓冲画布的一些操作
        g_canvasBuffer = document.createElement("canvas");
        g_canvasBufferContext = g_canvasBuffer.getContext("2d");
        g_canvasBuffer.width = g_iWidth;
        g_canvasBuffer.height= g_iHeight;

        if (! g_canvasBuffer)
            console.error("g_canvasBuffer == null");
        if (! g_canvasBufferContext)
            console.error("g_canvasBufferContext = null");

        g_canvasBufferContext.beginPath() //清空子路径

        g_canvasBufferContext.strokeStyle = "blue";
        g_canvasBufferContext.moveTo(0, 0);
        g_canvasBufferContext.lineTo(20, 10);
        g_canvasBufferContext.lineTo(40, 100);
        g_canvasBufferContext.lineTo(600, 300);
        g_canvasBufferContext.lineTo(500, 400);
        g_canvasBufferContext.lineTo(700, 500);//*/
        g_canvasBufferContext.stroke();

        g_canvasBufferContext.closePath() //闭合路径

    // *** *** ***
        // ZC: 从缓冲画布 往 网页画布<canvas/> 上画
        canvasContext.drawImage(g_canvasBuffer, 0, 0, g_iWidth, g_iHeight, 0, 0, g_iWidth, g_iHeight);
    };

</script>

</head>

<body>

<!-- ZC: canvas节点的width&height属性，设置在style里面的话，在chrome(版本 51.0.2704.63 m)中效果不对 -->
<canvas id="idCanvas" width="800" height="500" style="border: 1px solid red;">
    Canvas not supported.
</canvas>

</body>
</html>

　　2.1、效果图

 

3、

4、

5、

 

posted @ 2016-09-16 14:58  Html5Skill  阅读(2132)  评论(0)  编辑  收藏  举报