Canvas 圆形图像的实现

利用QML的Canvas画的圆形头像的实现,边缘增加发光效果,看起来还不错!

Canvas 圆形图像的实现_第1张图片

import QtQuick 2.1
import QtGraphicalEffects 1.0 
Item {
    id: root
    width: 400
    height: 400

    Rectangle {
        id: bug
        anchors.fill: parent
        color: "#25292b"
    }
    Canvas {
        id: mask
        anchors.fill: parent

        Component.onCompleted: {
             loadImage("516.png")
        }

        onPaint: {
            var ctx = mask.getContext('2d')
            ctx.save()
            ctx.strokeStyle = "#009cff"
            ctx.shadowBlur = 10
            ctx.shadowColor = "#009cff"
            ctx.lineWidth = 3;
            ctx.beginPath();
            ctx.ellipse(0, 0, 400, 400)
            ctx.closePath()
            ctx.stroke();
            ctx.clip()
            ctx.drawImage('516.png', 0, 0)
            ctx.stroke()
            ctx.restore()
        }
    }


}


你可能感兴趣的:(Canvas 圆形图像的实现)