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

效果图：

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

HTML5游戏开发技术基础整理
随着HTML5标准最终敲定,HTML5将有望成为游戏开发领域的的热门平台.HTML5游戏能够运行于包括iPhone系列和iPad系列在内的计算机.智能手机以及平板电脑上,是目前跨平台应用开发的最佳实施 ...
matlab hist函数_超全Matlab绘图方法整理(建议收藏！)
你好,我是goldsunC 让我们一起进步吧! 使用Matlab绘图图像是结果的一种可视化表现,它能直观的体现你的结果,并且能体现你获得结果的准确性,在当前的大数据时代,在做数据分析的时候,将其可视 ...
html5画板的使用方法和功能,canvas实现的画板功能
闲来无事正好团队准备做一个画板相关的项目,虽然我不在其中但是对这个画板还是蛮有兴趣的. 主要是通过canvas这个标签加上鼠标的一些相关事件来实现的. 中间有碰到过一个bug canvas的画板大小不 ...
Android绘图实例(Bitmmap,Canvas,Pain的使用)动态的在图片上添加文字(canvas.drawText)
近些天学习图像处理,今天看见了一段代码中有Bitmap时,找了些Bitmap的资料,有查看了与之有关的绘图类. BitMap代表一张位图,BitmapDrawable里封装的图片就是一个Bitmap对 ...
Android动态添加5个图片资,Android绘图实例(Bitmmap,Canvas,Pain的使用)动态的在图片上添加文字(canvas.drawText)...
近些天学习图像处理,今天看见了一段代码中有Bitmap时,找了些Bitmap的资料,有查看了与之有关的绘图类. BitMap代表一张位图,BitmapDrawable里封装的图片就是一个Bitmap对 ...
div图片背景虚化不影响图片上的文字_背景图片模糊，其中文字清晰实现方法总结...
先上效果图: 之前: 之后: 实现方式: 第一种:两张图片叠加,上面放一个纯白色的,下面放这张清晰的医生的图第二种:背景图片上面,使用一层遮罩,设计背景色为纯白色,并且是有一定透明度的背景模糊文字 ...
WPF开发txt阅读器7：自定义文字和背景颜色
文章目录添加控件具体实现代码说明 txt阅读器系列: 需求分析和文件读写目录提取类
小猿圈html5教程之canvas绘制线段方法
HTML5现在是时下较火的编程语言之一,但是对于怎么学习很多朋友都是不了解的,不知道从何处下手,针对以上内容小猿圈web前端讲师每天会分享一个web前端知识,希望对你的前端学习有一定的帮助,今天分享的 ...
移动端canvas画板绘图工具
移动端canvas画板绘图工具原生js canvas画板可在移动端使用,使用鼠标或者手指触屏绘画各种图形效果. 演示地址下载地址

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

Canvas 图片切割

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

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

最新文章

热门文章

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

Canvas 图片切割

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

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

最新文章

热门文章

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

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