背景封面自定义图片

<!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><script id="__bs_script__">//<![CDATA[
    document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.7'><\/script>".replace("HOST", location.hostname));
//]]></script>

    <img id="img1" width="100" height="100" crossOrigin="anonymous" src="./2.jpg" alt="">
    <script>

        // 图片在前会 压在画片后面     ctx.beginPath() 回到最开始的状态 重新开辟路径


        class CanvasWay {
            constructor(watermark) {
                this.watermark = watermark
                const { width, height } = watermark
                this.canvas = document.createElement('canvas');
                this.canvas.setAttribute('width', width);
                this.canvas.setAttribute('height', height);
                this.R = Math.sqrt(width * width + height * height)

                // this.canvas.setAttribute('width', 2 * this.R);
                // this.canvas.setAttribute('height', 2 * this.R);
            }

            render() {
                let dir=10;
                const { txt, x, y, width, height, font, color, fontSize, alpha, angle } = this.watermark
                const ctx = this.canvas.getContext('2d');

                ctx.clearRect(0, 0, width*dir, height*dir);


                ctx.moveTo(0, 0); // 起点
                ctx.lineTo(0, 0 + height*dir)

                ctx.lineTo(0 + width*dir, 0 + height*dir)
                ctx.lineTo(width*dir + 0, 0)


                ctx.stroke();
                ctx.clip();

                // let oimg = document.getElementById('img1');
                // ctx.drawImage(oimg, 0, 0, oimg.width, oimg.height);
                let img = new Image()
                // img.setAttribute('crossOrigin', 'anonymous');
                img.crossOrigin = 'anonymous'
                img.src = './2.jpg'
                img.onload = () => {
                    
                    ctx.drawImage(img, 0, 0, img.width*dir / 6, img.height*dir / 6);
                   
                    ctx.beginPath();

                    ctx.textBaseline = 'top';
                    ctx.textAlign = 'left'
                    ctx.fillStyle = color;
                    ctx.globalAlpha = alpha;
                    ctx.font = `${fontSize*dir}px ${font}`



                    const [columns, rows] = [~~(2 * this.R / (ctx.measureText(txt).width + 40)), ~~(2 * this.R / (fontSize + 40))];
                    // const [columns, rows] = [~~((height * Math.sin(Math.PI / 180 * angle) + width * Math.cos(Math.PI / 180 * angle)) / (ctx.measureText(txt).width + 10)), ~~((height * Math.cos(Math.PI / 180 * angle) + width * Math.sin(Math.PI / 180 * angle)) / (fontSize + 10))];

                    // ctx.translate(this.R, this.R)
                    ctx.rotate(-Math.PI / 180 * angle);
                    let zx = 0, zy = 0;
                    for (let i = 0; i < columns + 1; i++) {
                        for (let j = 0; j < rows + 1; j++) {

                            zx = x + i * (ctx.measureText(txt).width + 40)
                            zy = y + j * (fontSize + 40)

                            ctx.fillText(txt, zx - this.R, zy - this.R);


                        }
                    }

                    // ctx.translate(-this.R, -this.R)

                    // ctx.arc(0, 0, this.R, 0, 2 * Math.PI);//在canvas中绘制圆形

                 

                    ctx.stroke()
                    ctx.rotate(Math.PI / 180 * angle);
                  

                  

                    // ctx.globalAlpha = 1;

                  


                    let zimg = new Image()
                    zimg.src = this.canvas.toDataURL();
                    document.body.appendChild(zimg)

                }

            }
        }

        let vcanvas = new CanvasWay({
            width: 1400,
            height: 1400,
            txt: '保密协议专用',
            // x: 10,
            // y: 190,
            x: 0,
            y: 0,
            font: 'Arial',
            color: '#ccc',
            fontSize: 16,
            alpha: 0.2,
            angle: -30

        })


        vcanvas.render()

        // setTimeout(() => {
        // let img = new Image()
        // img.src = vcanvas.render()
        // document.body.appendChild(img)
        // }, 1000)

    </script>
</body>

</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web修理工

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值