【canvas】canvas优化 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="./ItcastRect.js"></script>
</head>
<body>
    <canvas width="600"  height="400" >
        
    </canvas>
</body>
    <script type="text/javascript">
    var canvas=document.querySelector("canvas");
    canvas.style.border="solid 1px #000";
    var c=canvas.getContext('2d');

    var canvasHide=document.createElement("canvas");//先用JS创建一个canvas元素
    canvasHide.width=canvas.width;//设置JS创建的canvas元素的宽
    canvasHide.height=canvas.height;//设置JS创建的canvas元素的高
    var chide=canvasHide.getContext("2d");//设置绘制2d的画布
    for(var i=0;i<10;i++){
        var r = new ItcastRect({
            x: Math.random() * 100,
            y: Math.random() * 100,
            w: Math.random() * 100,
            h: Math.random() * 100,
            rotation: Math.random() * 90,
            opacity: Math.random()
        });
        r.render(chide);
    }
    //上面的for循环是在JS创建的canvas中先绘画完


    c.drawImage(canvasHide,100,100);
    //这里是把在JS创建的canvas中的绘画显示到客户端显示的canvas

    //这样的做法的优点是先把图在内存绘画好，再显示到真正显示的画布中
    //如果是直接在真正显示的画布上绘画,这样会大大消耗用户的显卡,因为是循环,
    //在真正显示的画布上的每一次绘画都是耗费相当的巨大


    </script>
</html>

 

posted @ 2017-08-15 10:17  丰study  阅读(139)  评论(0)    收藏  举报