h5如何添加水印

最新推荐文章于 2024-05-09 16:35:38 发布

原创最新推荐文章于 2024-05-09 16:35:38 发布 · 置顶 · 3.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#原生js

本文介绍了一个使用HTML5 Canvas元素进行图像绘制的例子，包括如何加载图像、设置画布尺寸以及在画布上绘制文字和图片。通过具体的代码实现了从加载图像到最终展示的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#cans{
display: block;
margin: 0 auto;
}
#cans2{
display: none;
margin-top: 10px;

}
</style>
</head>
<body>
<canvas id="cans" >
很抱歉您的浏览器版本不支持该功能
</canvas>
<canvas id="cans2" >
很抱歉您的浏览器版本不支持该功能
</canvas>
<script type="text/javascript">
//画布初始化
var cans=document.getElementById("cans");
cans.height=767;
cans.width=766;
var cantent=cans.getContext("2d");
var img=new Image();
img.src="IMG_0003.JPG";
var cans2=document.getElementById("cans2");
cans2.height=100;
cans2.width=200;
var cantent2=cans2.getContext("2d");
cantent2.font="bold 19px arial"
// cantent2.lineWidth=2
cantent2.strokeStyle="white";
cantent2.textAlign="right-bottom";
cantent2.textBaseline="top";
cantent2.strokeText("xiE.Bin-2018.1.26",30,70);

img.onload=function(){
cantent.drawImage(img,0,0,cans.width,cans.height)
cantent.drawImage(cans2,500,650)
}

//开始绘图

</script>
</body>
</html>