HTML5 Canvas 开发绘图方法整理【七、canvas 图片切割、自定义文字、字体背景】

向右看齐 2022-05-31 09:16 287阅读 0赞

#### Canvas 图片切割 ####

语法：

ctx.clip();  
从画布中剪切任意形状和尺寸。

需要注意的是： 剪切之后，除设定Canvas “状态” 外，  
一般都会在裁剪后的图形里绘制。

这个不难理解，直接来个示例代码吧：

window.function () {
            let cans=document.getElementById("sixthC");
            let ctx=cans.getContext("2d");
    
            //先绘制一个想要切割后的图形：  （本来想画个五角星，太懒了 ，画个箭头吧...(￣ε(#￣)）
            ctx.strokeStyle = "#F00";
            ctx.moveTo(170,100);
            ctx.lineTo(300,150);
            ctx.lineTo(170,200);
            ctx.lineTo(210,150);
            ctx.lineTo(170,100);
            ctx.stroke();
    
            //将上面汇好的图形设定为图片被切割后的图形
            ctx.clip();
    
            let pic=new Image();
            pic.src="img/img1.jpg";
    
            pic.function () {
                ctx.drawImage(pic,170,100);
    
    
                ctx.font="bold 30px KaiTi";
                let title=ctx.createPattern(im,'no-repeat');
                ctx.fillStyle=title;
                ctx.fillText("马上就下班了",30,200);
            };
        };

效果图：

![这里写图片描述][70]

--------------------

#### 也可以用做文字的背景来使用 ####

//将图片作为文字的背景：  图文相结合  (由于 clip() 原因，这里就分开两个canvas来示例，clip()比较复杂，后面会单独说)
            let cans2=document.getElementById("sixthC2");
            let ctx2=cans2.getContext("2d");
    
            let im=new Image();
            im.src="img/img1.jpg";
    
            im.function () {
                ctx2.font="bold 30px KaiTi";
                let title=ctx2.createPattern(im,'no-repeat');
                ctx2.fillStyle=title;
                ctx2.fillText("马上就下班了",20,50);
            }

效果图：

![这里写图片描述][70 1]

[70]: /images/20220531/f8e358fe90b8485fa8366ad94c564f1f.png
[70 1]: /images/20220531/6785078327dd408891d44f4415026104.png