绘制海报

作者: 苍老师的眼泪 | 来源:发表于2021-12-27 17:59 被阅读0次

绘制海报
Canvas - 海报绘制
canva绘制海报02：圆角海报
canvas绘制分享海报
php绘制海报方法
神器推荐｜gif特效神技！头号玩家海报设计师也在玩……
React通过简单CSS属性来绘制canvas海报图片(reac
关于canvas在ios端的不良表现
蒲巴画展活动策划流程及安排
疫情期间学生精心绘制抗疫英文海报，为武汉加油！为中国加油！

image.png

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <canvas id="canvas" width="360" height="360">
          您的浏览器不支持该功能，请升级你的浏览器。
        </canvas>
    </div>

    <script>
        let canvas = document.getElementById("canvas")

        let img = new Image()
        img.src = "https://asset.gign.xyz/cxk2.jpg"

        img.onload = function() {
            let ctx = canvas.getContext("2d")
            ctx.save()
            ctx.arc(40, 40, 30, 0, 2 * Math.PI);
            ctx.clip()
            ctx.drawImage(img, 10, 10, 60, 60);
            ctx.restore()

            ctx.font = "48px sans-serif"

            ctx.save()

            var grd = ctx.createLinearGradient(0, 0, canvas.width, 0); //渐变
            grd.addColorStop("0", "magenta");
            grd.addColorStop("0.5", "blue");
            grd.addColorStop("1.0", "red");

            ctx.strokeStyle = grd

            ctx.strokeText("蔡徐坤", 100, 60);
            ctx.restore()
        }
    </script>
</body>

</html>