<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #fefefe;
}
.title {
margin-top: 95px;
text-align: center;
}
.desc {
color: #777;
text-align: center;
}
.icon {
display: block;
width: 48px;
height: 48px;
margin: 30px auto;
}
img {
width: 200px;
}
</style>
</head>
<body>
<h1 class="title">
Hello 笔.COOL
</h1>
<p class="desc">
<i>一笔一划，绘就人生；一码一境，酷创未来。1</i>
</p>
<canvas id='canvas' width="300px" height="300px"></canvas>
<img src="./assets/%E5%A4%B4%E5%83%8F1.jpeg" /><img src="./assets/logo(2).png" />
<img src="./assets/头像4.webp" />
<img src="./assets/screenshot-20250413-025254.png" />
<img src="https://cloud-static.com/gallery/741718052699_.pic.jpg" />
<script>
// 载入图片
let img = new Image();
img.onload = drawWaterMarks;//图片加载成功的回调
img.src = './assets/%E5%A4%B4%E5%83%8F1.jpeg';// 要绘制水印的图片
// 绘制水印
function drawWaterMarks(){
// 创建画布
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.drawImage(img,0,0, 300,300)
ctx.font = "bold 18px 'Fira Sans'";
ctx.fillStyle = 'rgba(255,255,255,0.6)'; //水印颜色
// 绘制水印
ctx.fillText("水印文字", 10, 20); //左上
ctx.fillText("水印文字", 220, 20); //右上
ctx.fillText("水印文字", 10, 190); //左下
ctx.fillText("水印文字", 220, 190);//右下
}
</script>
</body>
</html>
index.html
assets
abc.sss
index.html