js圆角图片 js canvas实现圆角图片
万剑 人气:0想了解js canvas实现圆角图片的相关内容吗,万剑在本文为您仔细讲解js圆角图片的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点: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(); }
加载全部内容