HTML5-画布(canvas)之实现裁剪操作

最新推荐文章于 2024-04-12 17:06:18 发布

南京闫伟亮的野爹

最新推荐文章于 2024-04-12 17:06:18 发布

阅读量966

点赞数

分类专栏：前端文章标签： Html5

原文链接：https://www.mk2048.com/blog/blog.php?id=jijhaabcb&title=HTML5-%E7%94%BB%E5%B8%83%28canvas%29%E4%B9%8B%E5%AE%9E%E7%8E%B0%E8%A3%81%E5%89%AA%E6%93%8D%E4%BD%9C

版权

前端专栏收录该内容

368 篇文章 3 订阅

订阅专栏

                        
                     
 <!DOCTYPE HTML>
<html>
<head>
    <title>剪裁</title>
</head>
<body>
    <canvas id="canvas" width="512" height="512" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        function drawIt() {

            clearIt();

            var img = new Image();

            img.onload = function () {
                ctx.drawImage(img, 0, 0, 512, 512);
            }

            img.src = "http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png";
            // img.src = "http://www.cnblogs.com/assets/html5_logo.png";

            /*
             * context.clip() - 只显示当前路径所包围的剪切区域
             */
            ctx.beginPath();
            ctx.arc(256, 256, 100, 0, Math.PI * 2, true);
            ctx.clip();
        }

        function clearIt() {
            ctx.clearRect(0, 0, 512, 512);
        }

    </script>
</body>
</html> 

南京闫伟亮的野爹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5-画布(canvas)之实现裁剪操作

<!DOCTYPE HTML> <html> <head> <title>剪裁</title> </head> <body> <canvas id="canvas" width="51...
复制链接

扫一扫