《JS原理、方法与实践》- canvas作图(二)- 组合、剪切、坐标检测| 8月更文挑战

·  阅读 105

组合与剪切

组合与剪切主要是对应多个图形来说的,组合指的是多个图形重叠时的组合方式,剪切是指使用路径来指定绘图的区域,类似于Photoshop中的蒙版的效果。

组合

图形的组合是通过globalCompositeOperation属性来操作的,该属性可以取下面的值:

  • source-over: 后绘制的图形覆盖原图,该值为默认值
  • source-in: 保留后绘制图形和原图形重叠的部分,使用后绘制图形的样式,其他区域透明,也就是保留相交的部分
  • source-out: 保留后绘制图形不和原图形重叠的部分,其他区域透明
  • source-atop: 保留后绘制图形和原图形重叠的部分,使用后绘制图形的样式,原图中的非重叠部分不变
  • destination-over: 后绘制图形被原图覆盖,也就是重叠部分显示原图
  • destination-in: 保留后绘制图形和原图形重叠的部分,使用原图的样式,其他区域透明
  • destination-out: 保留原图不和后绘制图形重叠的部分,其他区域透明
  • destination-atop: 保留后绘制图形和原图形重叠的部分,使用原图的样式,后绘制图形中的非重叠部分不变
  • lighter: 后绘制图形和原图重叠的部分进行叠加
  • copy: 显示后绘制图形,不显示原图
  • xor: 后绘制图形和原图重叠的部分进行异或操作
  • multiply: 将后绘制图形和原图的像素相乘,图形变暗
  • screen: 将后绘制图形和原图的像素分别反向后相乘再反向,图形变亮
  • overlay: 组合使用multiply和screen,使亮的部分更亮,暗的部分更暗
  • darken: 取两个图形中较暗的像素值,例如,#aa0011与#cc3300计算后为#aa0000
  • ighten: 取两个图形中较亮的像素值,例如,#aa0011与#cc3300计算后为#aa3311
  • color-dodge: 使用原图像素除以后绘制图形的反向像素值
  • color-burn: 使用原图反向像素除以后绘制图形的像素,然后再反向
  • hard-light: 组合使用multiply和screen,它与overlay的区别是将原图和后绘制图形进行交换
  • soft-light: 类似于hard-light,但比hard-light柔和
  • difference: 使用后绘制图形的像素值减去原图的像素值
  • exclusion: difference操作后降低对比度
  • hue: 使用后绘制图形的色调和原图的亮度、色度
  • saturation: 使用后绘制图形的色度和原图的亮度、色调
  • color: 使用后绘制图形的色度、色调和原图的亮度
  • luminosity:使用后绘制图形的亮度和原图的色度、色调

示例:

<body>
    <canvas id='c2d'>浏览器不支持canvas</canvas>
    <script>
        const canvas = document.getElementById('c2d');
        if (canvas.getContext) {
            let ctx = canvas.getContext('2d');

            ctx.fillStyle = 'red';
            ctx.fillRect(30,60,60,40);

            ctx.globalCompositeOperation = 'destination-over';

            ctx.fillStyle = 'blue';
            ctx.fillRect(70,40,60,40);
        }
    </script>
</body>
复制代码

运行结果

剪切

剪切的作用其实是指定新的绘图区域,如果将图像绘制到剪切区域外面就显示不出来了,但是剪切操作不会影响剪切之前的图形。剪切使用的是clip方法,如下:

  • clip([fillRule="nonzero"])
  • clip(path[,fillRule="nonzero"])

fillRule:用来指定用你什么算法来判断一个点是否在被剪切的区域内,可取“nonzero”或“evenodd” 当路径是使用beginPath创建时,使用第一种方式直接调用clip,当路径是使用Path2D创建时,需要使用第二种方式将创建的路径作为参数传入。 示例:

<body>
    <canvas id='c2d'>浏览器不支持canvas</canvas>
    <script>
        const canvas = document.getElementById('c2d');
        if (canvas.getContext) {
            let ctx = canvas.getContext('2d');

            ctx.fillRect(110,15,30,45);

            ctx.beginPath();
            ctx.arc(60,60,45,0,2*Math.PI);
            ctx.stroke();

            ctx.clip();
            ctx.fillRect(0,0,60,60);
        }
    </script>
</body>
复制代码

运行结果 首先画一个以(110,15)为左上顶点,宽为30、高为45的矩形,接着剪切了一个(60,60)为圆形、45为半径的圆,然后又画了一个以(0,0)为左上角,宽和高都是60的矩形。这时第一个矩形可以正常显示,但是第二个矩形只有剪切区域中的部分(也就是和剪切区域相交的部分)才可以显示出来。

坐标检测

坐标检测就是检测指定的点是否在所画的路径中,可以用于动画和游戏的碰撞检测中。坐标检测使用的是isPointInPath方法,方法如下:

  • isPointInPath(x,y[,fillRule="nonzero"])
  • isPointInPath(path,x,y[,fillRule="nonzero"])

参数中,fillRule也用于指定算法,一般不需要修改;x和y为要检测点的坐标;path为使用Path2D新建出来的路径,如果是beginPath新建的路径,就可以直接调用。 示例:

<body>
    <canvas id='c2d'>浏览器不支持canvas</canvas>
    <div></div>
    <script>
        const canvas = document.getElementById('c2d');
        if (canvas.getContext) {
            let ctx = canvas.getContext('2d');

            const newPath = new Path2D();
            newPath.rect(30,30,40,60);

            const div = document.querySelector('div');
            const spanValue =  `<span>30,40 is in Path: ${ctx.isPointInPath(newPath,30,40)}</span>`;
            const spanValue1 =  `<span>20,40 is in Path: ${ctx.isPointInPath(newPath,20,40)}</span>`;
            div.innerHTML = spanValue + '<br>' + spanValue1;
        }
    </script>
</body>
复制代码

运行结果

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改