js,canvas实现圆角图片，久久派带你了解更多相关信息。
本文实例为大家分享了js canvas实现圆角图片的具体代码，供大家参考，具体内容如下
圆角图片的代码实现：
<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <title>Title</title></head><body style=\"background: rgba(199,237,204,1)\"> <p style=\"display:flex; flex-direction: row\"> <!--通过style方式为canvas设置宽高在火狐浏览器上导致绘制内容纵向拉伸。。。--> <canvas id=\"drawing\" width=\"400px\" height=\"400px\">canvas to draw</canvas> <pre id=\"container\" style=\"margin: 10px\"/> <img src=//img.jbzj.com/file_images/article/202109/202191115608734.jpg></p></body><script type=\"text/javascript\"> window.οnlοad=function () { var drawing = document.getElementById(\'drawing\'); if (drawing.getContext) { print(\'support\') addRoundRectFunc(); var context = drawing.getContext(\'2d\'); draw(context); } else { print(\'not \') } } function draw(context) { context.fillStyle = \'red\'; var image = document.images[0]; context.roundRect(0,0,image.width/2,image.height/2,30,true) context.globalCompositeOperation=\'source-in\'; context.drawImage(image, 0, 0, image.width / 2, image.height / 2) // toImage(); } function addRoundRectFunc() { CanvasRenderingContext2D.prototype.roundRect = function (x, y, width, height, radius, fill, stroke) { if (typeof stroke == \"undefined\") { stroke = true; } if (typeof radius === \"undefined\") { radius = 5; } this.beginPath(); this.moveTo(x + radius, y); this.lineTo(x + width - radius, y); this.quadraticCurveTo(x + width, y, x + width, y + radius); this.lineTo(x + width, y + height - radius); this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); this.lineTo(x + radius, y + height); this.quadraticCurveTo(x, y + height, x, y + height - radius); this.lineTo(x, y + radius); this.quadraticCurveTo(x, y, x + radius, y); this.closePath(); if (stroke) { this.stroke(); } if (fill) { this.fill(); } }; } function toImage() { var imageUri = drawing.toDataURL(\'image/png\'); var imageTag = document.createElement(\'img\'); imageTag.style = \'margin:10px;width:200px;height:200px\' imageTag.src = imageUri; document.body.appendChild(imageTag) } function print(txt) { document.getElementById(\"container\").innerHTML += (\'\\n\') + txt; } document.body.onclick = function () { window.location.reload() } console.log = print; </script> </html>
效果图：
补充一段使用小代码：canvas 生成圆角图片（头像等）
circleImg(ctx, img, x, y, r) { ctx.save(); var d =2 * r; var cx = x + r; var cy = y + r; ctx.arc(cx, cy, r, 0, 2 * Math.PI); ctx.clip(); ctx.drawImage(img, x, y, d, d); ctx.restore(); }
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持趣讯吧。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 55@qq.com 举报，一经查实，本站将立刻删除。转转请注明出处：https://www.szhjjp.com/n/19784.html