Canvas globalCompositeOperation API

最新推荐文章于 2024-04-02 15:32:37 发布

weixin_34184158

最新推荐文章于 2024-04-02 15:32:37 发布

阅读量118

点赞数

文章标签： javascript ViewUI

参考：

http://www.cnblogs.com/jenry/archive/2012/02/11/2347012.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>globalCompositeOperation</title>
</head>

<body>
    <div>
        <div>先画矩形后画圆;source指将要绘制的;destination指已经存在的;</div>
        <select name="slt" id="sltId" onchange="showGCO()">
            <option value="copy">copy-只画新图</option>
            <option value="darker">darker-颜色相减</option>
            <option value="destination-atop">destination-atop-</option>
            <option value="destination-in">destination-in</option>
            <option value="destination-out">destination-out</option>
            <option value="destination-over">destination-over</option>
            <option value="lighter">lighter-颜色相加</option>
            <option value="source-atop">source-atop</option>
            <option value="source-in">source-in</option>
            <option value="source-out">source-out</option>
            <option value="source-over">source-over</option>
            <option value="xor">xor</option>
        </select>
    </div>
    <canvas id='myCanvas' width='800' height='600'>
        your browser does not support canvas
    </canvas>
    <script type="text/javascript">
    function showGCO() {
        var slt = document.getElementById('sltId');
        // alert(slt.value);
        var c = document.getElementById('myCanvas');
        var ctx = c.getContext('2d');
        ctx.fillStyle = '#00ff00';
        ctx.fillRect(10, 10, 50, 50);
        ctx.globalCompositeOperation = slt.value;
        ctx.beginPath();
        ctx.fillStyle = '#ff0000';
        ctx.arc(50, 50, 30, 0, 2 * Math.PI);
        ctx.fill();
    }
    </script>
</body>

</html>