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

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); }

效果图：