canvas关于图形

最新推荐文章于 2022-11-27 13:30:36 发布

outside-R

最新推荐文章于 2022-11-27 13:30:36 发布

阅读量69

点赞数

分类专栏： HTML5 文章标签： HTML5 Canvas globalCompositeOperation 图形混合前端开发

本文链接：https://blog.csdn.net/weixin_45044349/article/details/117958457

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

属性较多，可以自由选择
合成属性globalCompositeOperation
在这里插入图片描述

<style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            /* 隐藏滚动条 */
            overflow: hidden;
        }

        canvas {
            border: 1px solid #000;
        }
    </style>
<body>
	  <canvas id="myCanvas" width="500" height="500"></canvas>
	  <script src="./index.js"></script>
</body>

index.js

  var myCanvas = document.getElementById('myCanvas'); // 拿到画布
        var ctx = myCanvas.getContext('2d') // 拿到画笔

        // 矩形
        ctx.beginPath();
        // 填充颜色
        ctx.fillStyle='red';
        // 清除
        ctx.fillRect(50,50,200,200);
        ctx.closePath();
        // 合成属性  【可以改变该属性，获得想要的效果图】
        // ctx.globalCompositeOperation = 'destination-out';
        ctx.globalCompositeOperation = 'lighter';
        // 圆
        ctx.beginPath();
        // 填充颜色
        ctx.fillStyle='blue';
        // 清除
        ctx.arc(200,200,100,0,Math.PI*2,0);
        ctx.fill();
        ctx.closePath();

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

outside-R

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
canvas关于图形

属性较多，可以自由选择<style> * { padding: 0; margin: 0; } html, body { /* 隐藏滚动条 */ overflow: hidden; } canvas { border: 1px solid #000; }
复制链接

扫一扫