js语法5---canvas圆角图片

最新推荐文章于 2023-10-09 17:35:02 发布

万剑

最新推荐文章于 2023-10-09 17:35:02 发布

阅读量5.1k

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/qingchunweiliang/article/details/71305352

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494089659713&di=2de3a402d0a89cd3e5ea785e30150928&imgtype=0&src=http%3A%2F%2Fsh.sinaimg.cn%2F2014%2F0715%2FU3551P18DT20140715192106.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>

万剑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js语法5---canvas圆角图片

Title canvas to draw window.onload=function () { var drawing = document.getElementById('drawing'); if (drawing.getContext) { print('suppo
复制链接

扫一扫