当前位置：网站首页>canvas图像阴影处理

canvas图像阴影处理

2022-08-11 09:02:00 【好奇的菜鸟】

一、图像重叠

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<!--<canvas id="myCanvas"></canvas>-->
<script>
    let gco = new Array();
    //目标图像顶部显示源图像
    gco.push("source-atop");
    //目标图像内部显示源图像
    gco.push("source-in");
    //目标图像之外显示源图像
    gco.push("source-out");
    //目标图像上显示源图像
    gco.push("source-over");
    //源图像顶部显示目标图像
    gco.push("destination-atop");
    //源图像内部显示目标图像
    gco.push("destination-in");
    //源图像外部显示目标图像
    gco.push("destination-out");
    //源图像上显示目标图像
    gco.push("destination-over");
    //显示源图像+目标图像
    gco.push("lighter");
    //显示源图像，忽略目标图像
    gco.push("copy");
    //使用异或，操作源图像与目标图像组合
    gco.push("xor");
    for (var n = 0; n < gco.length; n++) {
        document.write("<div id='p_" + n + "' style='float:left;'>" + gco[n] + ":<br>");
        var c = document.createElement("canvas");
        c.width = 120;
        c.height = 100;
        document.getElementById("p_" + n).appendChild(c);
        var ctx = c.getContext("2d");
        ctx.fillStyle = "blue";
        //绘制蓝色矩形，目标图像
        ctx.fillRect(10, 10, 50, 50);
        //如何将源图像绘制到目标图像，源图像=打算绘制的图像，目标图像=已经存在图像
        ctx.globalCompositeOperation = gco[n];
        ctx.beginPath();
        ctx.fillStyle = "red";
        //绘制红色圆，源图像
        ctx.arc(50, 50, 30, 0, 2 * Math.PI);
        ctx.fill();
        document.write("</div>")
    }
</script>
</body>

</html>

二、图像阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
<script>
<!--    获取元素-->
    var c=document.getElementById("myCanvas");
    //获取canvs上下文
    var ctx=c.getContext("2d");
    //设置阴影模糊级数
    ctx.shadowBlur=10;
    //设置X轴偏移量
    ctx.shadowOffsetX=20;
    //设置Y轴偏移量
    ctx.shadowOffsetY=16;
    //设置阴影颜色
    ctx.shadowColor="black";
    ctx.fillStyle="red";
    ctx.fillRect(20,20,100,80);
</script>

</html>

三、绘制五角星

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body onload="draw('myCanvas')">
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script>


    function draw(id) {
        var c = document.getElementById(id);
        //获取canvs上下文
        var ctx = c.getContext("2d");
        //设置填充颜色
        ctx.fillStyle = "#eeeeef";
        //绘制矩形
        ctx.fillRect(0, 0, 500, 500);
        //设置阴影偏移量
        ctx.shadowOffsetX = 20;
        ctx.shadowOffsetY = 10;
        //设置阴影颜色
        ctx.shadowColor = 'rgba(100,100,100,0.5)';
        //设置阴影模糊度
        ctx.shadowBlur = 3.5;
        //设置绘制偏移量
        ctx.translate(0, 50);
        for (var i = 0; i < 3; i++) {
            ctx.translate(100, 100);
            createStart(ctx);
            ctx.fill();
        }
        //绘制五角星
        function createStart(ctx) {
            var dx=100;
            var dy=0;
            var s=50;
            ctx.beginPath();
            ctx.fillStyle='rgba(255,0,0,0.5)';
            //将360度分为5等份
            var dig=4*Math.PI/5;
            for (var i = 0; i < 5; i++) {
                var x=Math.sin(i*dig);
                var y=Math.cos(i*dig);
                //绘制直线
                ctx.lineTo(dx+x*s,dy+y*s);
            }
            //100 50
            //40 129.38926261462365 -40.450849718747364
            //40 52.44717418524232 15.450849718747362
            //40 147.55282581475768 15.450849718747387
            //40 70.61073738537635 -40.450849718747385
            ctx.closePath();
        }
    }

</script>

</html>