Canvas绘制圆形头像

简介: Canvas绘制圆形头像

image.png

实现代码


<canvas id="canvas"
            width="500"
            height="500"></canvas>
    <script>
        let Canvas = document.querySelector('#canvas');
        let ctx = Canvas.getContext("2d");
        // 绘制画布背景
        ctx.fillStyle = "#ccc";
        ctx.fillRect(0, 0, 500, 500);
        // 绘制圆形头像
        let avatar = new Image();
        avatar.src = 'https://api.sunweihu.com/api/sjtx/api.php?lx=c1';
        avatar.onload = (res) => {
            // console.log(res);
            console.log(avatar.height, avatar.width);
            drawCircleImage(ctx, avatar, 250, 250, 100);
            // 图像绘制完成之后继续绘制其他内容
            ctx.strokeStyle = 'red'
            ctx.strokeRect(20, 20, 460, 460);
        }
        /**
         * ctx 画布上下文
         * img 图片对象
         * (x, y)圆心坐标
         * radius 半径
         * 注意:绘制圆形头像之前,保存画笔;绘制完成后恢复
         * */
        function drawCircleImage(ctx, img, x, y, radius) {
            ctx.save();
            let size = 2 * radius;
            ctx.arc(x, y, radius, 0, 2 * Math.PI);
            ctx.clip();
            ctx.drawImage(img, x - radius, y - radius, size, size);
            ctx.restore();
        }
</script>

在线demo: https://mouday.github.io/front-end-demo/canvas/canvas-avatar.html

相关文章
|
2月前
|
前端开发
|
15天前
|
移动开发 前端开发 HTML5
Canvas画布之100个小球弹射源码
Canvas画布之100个小球弹射源码
|
2月前
|
前端开发
canvas详解04-绘制文字
canvas详解04-绘制文字
39 2
canvas详解04-绘制文字
|
2月前
|
缓存 前端开发 JavaScript
canvas详解01-绘制基本图形
canvas详解01-绘制基本图形
72 2
|
11月前
|
移动开发 前端开发 JavaScript
使用Canvas绘制图形和动画
使用Canvas绘制图形和动画
152 0
|
XML 前端开发 Java
用Canvas绘制一个数字键盘
用Canvas轻轻松松搞一个数字键盘,本身没什么难度,这种效果实现的方式也是多种多样,这篇只是其中的一种,要说本篇有什么特别之处,可能就是纯绘制,没有用到其它的任何资源,一个类就搞定了。
|
前端开发
canvas渐变
canvas渐变
105 1
canvas渐变
|
前端开发
canvas绘制五角星
canvas绘制五角星
152 0
|
前端开发
|
前端开发
Canvas图形绘制
Canvas图形绘制
151 0
Canvas图形绘制