脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js圆角图片

js canvas实现圆角图片

 更新时间：2021年09月01日 11:59:20   作者：万剑  
这篇文章主要为大家详细介绍了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)">
 
<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();
  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Javascript自定义事件详解

    Javascript自定义事件详解

    这篇文章主要介绍了Javascript自定义事件，本质就是观察者模式，好处就是将绑定事件和触发事件相互隔离开等等，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 一个js封装的不错的选项卡效果代码

    一个js封装的不错的选项卡效果代码

    在论坛里经常看到人问选项卡或者类似选项卡的切换效果 这里封装了个js，希望对大家有用 所有代码都在下面了 如果有错误或者建议，可以回贴告诉我，谢谢
    2008-02-02
  • input链接页面、打开新网页等等的具体实现

    input链接页面、打开新网页等等的具体实现

    input可以链接到某页、返回、打开新网页、打开无边框的新窗口等等，本文整理了一些，感兴趣的朋友可以参考下
    2013-12-12
  • Bootstrap图片轮播效果详解

    Bootstrap图片轮播效果详解

    这篇文章主要为大家详细介绍了Bootstrap图片轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10
  • JS暴虐查找法简洁版

    JS暴虐查找法简洁版

    有过相关经验的朋友都知道，Jscript的效率毕竟有限，在数组中查找数据时如果用常规的算法来做执行起来会很慢。
    2008-07-07
  • 解析从小程序开发者工具源码看原理实现

    解析从小程序开发者工具源码看原理实现

    小程序的架构设计与web技术还是有一定的差别，其吸取了web技术的一些优势，同时也摒弃web技术中体验等不好的地方。下面通过问题的形式来说说小程序架构中的一些设计点
    2021-06-06
  • JavaScript复制文案到剪贴板小技巧

    JavaScript复制文案到剪贴板小技巧

    这篇文章主要为大家介绍了JavaScript复制文案到剪贴板实现小技巧,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • JS实现获取剪贴板内容的方法

    JS实现获取剪贴板内容的方法

    这篇文章主要介绍了JS实现获取剪贴板内容的方法,涉及javascript基于clipboardData操作剪贴板的相关技巧,需要的朋友可以参考下
    2016-06-06
  • 老生常谈js动态添加事件--- 事件委托

    老生常谈js动态添加事件--- 事件委托

    下面小编就为大家带来一篇老生常谈js动态添加事件--- 事件委托。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • JS实现的样式切换功能tableCSS实例

    JS实现的样式切换功能tableCSS实例

    这篇文章主要介绍了JS实现的样式切换功能tableCSS,结合实例形式分析了js页面元素遍历与样式动态操作相关技巧,需要的朋友可以参考下
    2016-12-12

最新评论