HTML5 canvas写入图像
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> canvas{ background: #272822; } </style> </head> <body> <img src="https://www.qiquanji.com/mip/data/img/dmj/201903151552614460179778.jpg" id="yt03" /> <br /> <canvas id="canvas" width="1000" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById('canvas'); var cv = canvas.getContext('2d'); // 获得图片 var yt03 = document.getElementById("yt03"); // 等yt03图片加载完毕后事件(要等加载完后，要不然不显示) yt03.onload = function(){ // 将图像写入画板中 100是距离左边是100 ，距离上面是50 // cv.drawImage(yt03,100,50); // 将图像写入画板中 100是距离左边是100 ，距离上面是50,300是指定图片大小的宽度，200是指定图片大小的高度 // cv.drawImage(yt03,100,50,300,200); // 50是裁切图片的图片左边50开始,上边的50开始,200是载图片区域宽,高200 cv.drawImage(yt03,50,50,200,200,100,50,300,200); } // 将图像写入画板中 // cv.drawImage(yt03,100,50); </script> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知