canvas 图片合并和添加图片

最新推荐文章于 2024-11-27 14:14:19 发布

一天一天来一趟

最新推荐文章于 2024-11-27 14:14:19 发布

阅读量949

点赞数

分类专栏： js

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/zou__qi/article/details/109474696

版权

js 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个使用HTML5 Canvas实现图像绘制的应用案例。通过点击图片，可以在Canvas上动态绘制新的图像，并实现了多张图片的叠加显示。该案例展示了如何利用JavaScript控制Canvas元素进行图像操作。

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

<!DOCTYPE>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body style="background:#eeeeee;">
   <img id="img" src="https://img-blog.csdnimg.cn/2022010617413179391.png" />
<canvas id="tutorial" width="500" height="550" style="z-index:100;display:block;position:absolute;"></canvas>
<img id="img2" src="https://img-blog.csdnimg.cn/2022010617413133672.png" >
   <img id="img1" src="https://img-blog.csdnimg.cn/2022010617413179391.png" />
   <canvas id="tutorials" width="500" height="550" style="z-index:100;display:block;position:absolute;"></canvas>

<script type="text/javascript">

   var img = document.getElementById('img');
       img.onclick = function() {
           btnCan(img)
       }
       var x =0;
       var y =0;
   function btnCan(img){
       x +=img.width;
       var canvas = document.getElementById('tutorial');
       var ctx = canvas.getContext('2d');
       ctx.drawImage(img,x,y)
   }
   function getimgs(){
       var img1 = document.getElementById('img1');
       var img2 = document.getElementById('img2');
   // var _width=parseInt(img1.width()/2.3);
   // var _height=parseInt(img2.height()/2.3);
   var canvas = document.getElementById("tutorials");
   var context = canvas.getContext("2d");
   context.drawImage(img2, 0, 0);
       context.drawImage(img1,180, 200);
   }
   getimgs();
   // getMousePos(event);
   // function getMousePos(event) {
   //    var e = event || window.event;
   //    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
   //    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
   //    var x = e.pageX || e.clientX + scrollX;
   //    var y = e.pageY || e.clientY + scrollY;
   //    //alert('x: ' + x + '\ny: ' + y);
   //    return { 'x': x, 'y': y };
   // }
</script>
</body>
</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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