今天的码农女孩做了关于canvas的小练习

代码如下

css部分加个边框

<style>

canvas {

border:5px solid black;

}

</style>

js部分

<script>

        var arr=["source-over","destination-over","source-atop","destination-atop",

                 "source-in","destination-in","source-out","destination-out","lighter","daker","xor","copy"]

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

            document.body.innerHTML+="<canvas width='300px' height='300px'></canvas>"

        }

        for(var i=0;i<arr.length;i++){

            var can=document.querySelectorAll("canvas")

            var txt=can[i].getContext("2d")

            txt.beginPath()

            txt.fillStyle="blue"

            txt.fillRect(20,20,150,150)

            txt.globalCompositeOperation=arr[i]

            txt.beginPath()

            txt.fillStyle="red"

            txt.arc(150,150,60,0,Math.PI*2,false)

            txt.fill()

        }

    </script>