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);};};
效果图：
也可以用做文字的背景来使用
//将图片作为文字的背景： 图文相结合 (由于 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);}
效果图：
如果觉得《HTML5 Canvas 开发 绘图方法整理 【七 canvas 图片切割 自定义文字 字体背景】》对你有帮助，请点赞、收藏，并留下你的观点哦！
