canvas知识点

曾经终败给现在 2022-07-21 11:19 181阅读 0赞

转载地址：http://www.2cto.com/kf/201406/308286.html

<table style="border-width:0px; padding:0px; margin:0px; list-style:none; color:rgb(51,51,51); font-family:宋体; font-size:14px; line-height:28px; background-color:rgb(249,249,249)"> 
 <tbody> 
 <tr style="border-width:0px; padding:0px; margin:0px; list-style:none"> 
 <td style="border-width:0px; padding:0px; margin:0px; list-style:none"> 绘制文字： 
 <table style="border-width:0px; padding:0px; margin:0px; list-style:none"> 
 <tbody> 
 <tr style="border-width:0px; padding:0px; margin:0px; list-style:none"> 
 <td style="border-width:0px; padding:0px; margin:0px; list-style:none"> fillText(text，x,y,maxWidth)：text表示文字，x，y为坐标，maxWidth可选，为文字最大宽度，防止文字溢出，填充文字&nbsp; strokeText(text,x,y,maxWidth)：text表示文字，x，y为坐标，maxWidth可选，为文字最大宽度，防止文字溢出，绘制文字 </td> 
 </tr> 
 </tbody> 
 </table> 阴影属性： 
 <table style="border-width:0px; padding:0px; margin:0px; list-style:none"> 
 <tbody> 
 <tr style="border-width:0px; padding:0px; margin:0px; list-style:none"> 
 <td style="border-width:0px; padding:0px; margin:0px; list-style:none"> shadowColor：设置阴影颜色 shadowBlur：设置阴影模糊级别 shadowOffsetX：设置阴影在x轴上距离图形的距离 shadowOffsetY：设置阴影在y轴上距离图形的距离 </td> 
 </tr> 
 </tbody> 
 </table> canvas绘制图像 视频 drawImage(img,x,y,width,height) 或者是 drawImage(img,x,y) 图像的平铺 
 <table style="border-width:0px; padding:0px; margin:0px; list-style:none"> 
 <tbody> 
 <tr style="border-width:0px; padding:0px; margin:0px; list-style:none"> 
 <td style="border-width:0px; padding:0px; margin:0px; list-style:none"> context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");&nbsp; img：图片 type： repeat整个画布平铺 repeat-x在x轴方向上平铺 repeat-y在y轴方向上平铺 no-repeat不平铺&nbsp;</td> 
 </tr> 
 </tbody> 
 </table> 转载地址：http://www.2cto.com/kf/201406/308286.html </td> 
 </tr> 
 </tbody> 
</table>