【HTML5】图形组合

来源：互联网发布：html源码怎么用编辑：程序博客网时间：2024/04/30 11:35
<!DOCTYPE html><html><head><meta charset="utf-8"><title>canvas</title><script>    // 图形组合 context.globalCompositeOperation=type    // 图形组合就是两个图形相互叠加了图形的表现形式,是后画的覆盖掉先画的呢，还是相互重叠的部分不显示等等，至于怎么显示就取决于type的值了    // type：    // source-over（默认值）:在原有图形上绘制新图形    // destination-over:在原有图形下绘制新图形    // source-in:显示原有图形和新图形的交集，新图形在上，所以颜色为新图形的颜色    // destination-in:显示原有图形和新图形的交集，原有图形在上，所以颜色为原有图形的颜色    // source-out:只显示新图形非交集部分    // destination-out:只显示原有图形非交集部分    // source-atop:显示原有图形和交集部分，新图形在上，所以交集部分的颜色为新图形的颜色    // destination-atop:显示新图形和交集部分，新图形在下，所以交集部分的颜色为原有图形的颜色    // lighter:原有图形和新图形都显示，交集部分做颜色叠加    // xor:重叠飞部分不现实    // copy:只显示新图形function draw() {        var canvas = document.getElementById("mycanvas");        if (canvas == null)         return false;        var context = canvas.getContext("2d");        var oprtns = new Array(        "source-over",        "destination-over",        "source-in",        "destination-in",        "source-out",        "destination-out",        "source-atop",        "destination-atop",        "lighter",        "xor",                 "copy"        );        var i = 0;//组合效果编号        //结合setinterval动态显示组合        var interal = setInterval(function () {            if (i == 10) {                i=0;            }            else {                i++;            }            //蓝色矩形            context.fillStyle = "blue";            context.fillRect(10, 10, 60, 60);            //设置组合方式             context.globalCompositeOperation = oprtns[i];            //设置新图形（红色圆形）            context.beginPath();            context.fillStyle = "red";            context.arc(60, 60, 30, 0, Math.PI * 2, false);            context.fill();        }, 2000);} window.onload=draw;</script></head><body>  <p id="p1"></p>  <canvas id="mycanvas" width="1000" height="800">当前浏览器不支持canvas</canvas></body></html>
1 0