canvas.clipPath,Clip Canvas
在帆布中，可以使用夹子()函数裁剪区域，设定裁剪区域后，只有在区域内的图像才能显示，其余部分会被屏蔽掉
未使用裁剪绘制一个圆
！DOCTYPE html html lang= en head meta charset= UTF-8 title/title style * { margin:0；填充：0;} html，body { width:100%；身高：100%;溢出：隐藏；背景色：# AFAFAF }/style/head body canvas id= canvas /canvas script var canvas=document。getelementbyid( canvas )，上下文=canvas。获取上下文(“2d”)；画布。宽度=文档。身体。客户端宽度；画布。高度=文档。身体。客户身高；语境。线宽=3；context . stroke style= red context。begin path()；context.arc(200，200，100，(数学/180)* 0，(数学180/180)* 360，假);语境。笔画()；语境。关闭路径()；/script /body /html效果
使用clip()裁剪区域
！DOCTYPE html html lang= en head meta charset= UTF-8 title/title style * { margin:0；填充：0;} html，body { width:100%；身高：100%;溢出：隐藏；背景色：# AFAFAF }/style/head body canvas id= canvas /canvas script var canvas=document。getelementbyid( canvas )，上下文=canvas。获取上下文(“2d”)；画布。宽度=文档。身体。客户端宽度；画布。高度=文档。身体。客户身高；语境。线宽=3；context . stroke style= red context . rect(0，0，200，200)；context.clip().语境。begin path()；context.arc(200，200，100，(数学/180)* 0，(数学180/180)* 360，假);语境。笔画()；语境。关闭路径()；/script /body /html效果
也可以使用arc绘制圆形的剪裁区域
！DOCTYPE html html lang= en head meta charset= UTF-8 title/title style * { margin:0；填充：0;} html，body { width:100%；身高：100%;溢出：隐藏；背景色：# AFAFAF }/style/head body canvas id= canvas /canvas script var canvas=document。getelementbyid( canvas )，上下文=canvas。获取上下文(“2d”)；画布。宽度=文档。身体。客户端宽度；画布。高度=文档。身体。客户身高；语境。线宽=3；context . stroke style= red context . arc(100，100，150，(数学/180)* 0，(数学180/180)* 360，假);context.clip().语境。begin path()；context.arc(200，200，100，(数学/180)* 0，(数学180/180)* 360，假);语境。笔画()；语境。关闭路径()；/script /body /html效果
使用save和restore实现只裁剪单个路径
！DOCTYPE html html lang= en head meta charset= UTF-8 title/title style * { margin:0；填充：0;} html，body { width:100%；身高：100%;溢出：隐藏；背景色：# AFAFAF }/style/head body canvas id= canvas /canvas script var canvas=document。getelementbyid( canvas )，上下文=canvas。获取上下文(“2d”)；画布。宽度=文档。身体。客户端宽度；画布。高度=文档。身体。客户身高；语境。线宽=3；context . stroke style= red context。save()；context.rect(0，0，200，200)；context.clip().语境。begin path()；context.arc(200，200，100，(数学/180)* 0，(数学180/180)* 360，假);语境。笔画()；语境。关闭路径()；语境。restore()；语境。begin path()；context.arc(250，250，100，(数学/180)* 0，(数学180/180)* 360，假);语境。笔画()；语境。关闭路径()；/script /body /html效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。