<!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>
背景封面自定义图片
最新推荐文章于 2025-08-04 14:37:55 发布