| 本文实例为大家分享了js canvas实现圆角图片的具体代码，供大家参考，具体内容如下 圆角图片的代码实现： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body style="background: rgba(199,237,204,1)"> <div 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></div></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(); }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
Vue全局自定义指令Modal拖拽的实践
vue项目中扫码支付的实现示例(附demo) |
