Canvas3 绘图和重叠

张哥编程

发布于 2024-12-17 10:09:09

29600

代码可运行

文章被收录于专栏：云计算linux云计算linux

运行总次数：0

代码可运行

组合图形

绘制阴影

<canvas id="canvas" width="500" height="500"></canvas>
    <script>
      function draw(){
        var c=document.getElementById("canvas");
        var ctx=c.getContext("2d");

        ctx.fillStyle="yellow";
        ctx.strokeStyle="yellow";

        var centerX=100;
        var centerY=100;
        var radius=50;
        var startAngle=0;
        var endAngle=2*Math.PI;
        //保存当前的绘图状态
        ctx.save();
        ctx.setTransform(1,0,-0.5,1,100,0);
        //开始绘图路径;
        ctx.beginPath();
        ctx.arc(centerX,centerY,radius,startAngle,endAngle,false);
        ctx.strokeStyle="white";
        ctx.stroke();
        ctx.fillStyle="rgba(0,0,0,0.2)";
        ctx.fill();
        //填充样式和填充完毕;
        ctx.restore();
        ctx.beginPath();
        ctx.arc(centerX,centerY,radius,startAngle,endAngle,false);
        ctx.stroke();
        ctx.fill();
      }
      window.addEventListener("load",draw(),true);
    </script>

<canvas id="canvas2" width="500" height="500"></canvas>
    <script>
      function draw2(){
        var c=document.getElementById("canvas2");
        var ctx=c.getContext("2d");

        ctx.fillStyle="yellow";
        ctx.fillRect(0,0,100,100);
        ctx.fillStyle="blue";
        ctx.fill();
        ctx.globalCompositeOperation="source-over";
        //画圆;
        var centerX=100;
        var centerY=100;
        var radius=50;
        var startAngle=0;
        var endAngle=2*Math.PI;
        ctx.beginPath();
        ctx.arc(centerX,centerY,radius,startAngle,endAngle,false);
        ctx.fill();
      }
      window.addEventListener("load",draw2(),true);
    </script>

在绘制图形时，如果画布上已经有图形，就涉及到一个问题：两个图形如何组合。可以通过CanvasRenderingContext2D.globalCompositeOperation属性来设置组合方式

<canvas id="canvas3" width="500" height="500"></canvas>
    <script>
      function draw3(){
        var c=document.getElementById("canvas3");
        var ctx=c.getContext("2d");
        ctx.fillStyle="yellow";
        ctx.save();
        //保存填充样式的颜色.

        ctx.shadowBlur=20;  //设置像素模糊值为20；
        ctx.shadowOffsetX=15;//横向值为15;
        ctx.shadowOffsetY=15;//纵向值为15；
        ctx.shadowColor="blue";
        ctx.fillRect(50,50,100,100);
        ctx.restore();
        ctx.fillRect(200,50,100,100);
      }
      window.addEventListener("load",draw3(),true);
    </script>