温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

html5中如何实现图像裁剪

发布时间:2021-01-30 14:32:06 来源:亿速云 阅读:251 作者:小新 栏目:web开发

这篇文章主要介绍html5中如何实现图像裁剪,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

效果截图:

html5中如何实现图像裁剪

代码:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas</title> <script>     // 图像裁剪:context.clip()     // context.clip()只绘制封闭路径区域内的图像,不绘制路径外部图像,用的时候     // 先创建裁剪区域     // 再绘制图像(之后绘制的图形都会采用这个裁剪区域,要取消这个裁剪区域就需要用到保存恢复状态,下面有讲)     // 给出圆形和星形的裁剪代码      function createCircleClip(context) {         context.beginPath();         context.arc(200, 170, 100, 0, Math.PI * 2, true);         context.closePath();         context.clip();     }     function create5StarClip(context) {         var n = 0;         var dx = 200;         var dy = 150;         var s = 150;         context.beginPath();         var x = Math.sin(0);         var y = Math.cos(0);         var dig = Math.PI / 5 * 4;         for (var i = 0; i < 5; i++) {            var x = Math.sin(i * dig);            var y = Math.cos(i * dig);            context.lineTo(dx + x * s, dy + y * s);         }         context.closePath();         context.clip();     } 	function draw() {         var canvas = document.getElementById("mycanvas");         if (canvas == null)          return false;         var context = canvas.getContext("2d");         context.fillStyle = "black";         context.fillRect(0, 0, 400, 300);         image = new Image();         image.src = "Image/html5.jpg"         image.onload = function () {             //圆形裁剪区             //createCircleClip(context)             //星形裁剪区             create5StarClip(context);             context.drawImage(image,0,0);         }         	} 	window.onload=draw; </script> </head> <body>   <p id="p1"></p>   <canvas id="mycanvas" width="1000" height="800">当前浏览器不支持canvas</canvas> </body> </html>

以上是“html5中如何实现图像裁剪”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI