js学习之canvas的基础与应用(二)(1)

最新推荐文章于 2024-07-05 21:33:55 发布

2401_84433974

最新推荐文章于 2024-07-05 21:33:55 发布

阅读量690

点赞数 11

分类专栏：程序员文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/2401_84433974/article/details/138291160

版权

程序员专栏收录该内容

192 篇文章 1 订阅

订阅专栏

1.阴影 ctx.shadowOffsetX 设置向x方向上的阴影 ctx.shadowOffsetY 设置向y方向上的阴影 ctx.shadowBlur 设置模糊度的大小 ctx.shadowColor 设置阴影部分的颜色。下面部分是应用的实例。

2.文本 fillText(“hello”,100,100) 使用这种方式时，如果再设置字体的宽度，那么就会有一个实体的字，此方法接收三个参数，第一个表示参数文字的内容第二三个参数表示文字产生的具体的位置 strokeText() 使用这种方式时，当设置字体的大小宽度时，就会产生一个描边字 ctx.font = ‘50px sans-serif’ 设置字体的大小第一个参数用绝对像素表示字体的大小后面表示字体的样式 ctx.textAlign 每个字体设置时会有一个圆点，该圆点表示字体对齐的位置，此属性表示在水平方向上圆点的位置 ctx.textBaseline 此属性表示在竖直方向上圆点的位置这两者的属性值可以在官网文档中可以查到

3.线段样式 lineCap属性当设置宽度时，能直观的设置线段的形状，其参数值有三个 butt 即默认的样式 square 线段的长度等于移动的长度两边再分别加上线段宽度的一半 round 线段的长度等于移动的长度两边再分别加上线段宽度的一半，并且加上的线段宽度部分为圆角； lineJoin属性截取线段组成的角的样式其参数值也有三个 miter 即默认的样式尖角 round 将尖角设置的更加圆润，有一个弧度 bevel 截取尖角，将剩余的部分直接截取为一条线； ctx.miterLimit 当lineJoin时miter时，用于控制斜接部分的长度，如果斜接部分超过miterLimit的值(限定值为10),就会变成bevel

4.裁剪 ctx.clip() 裁剪当前路径外的区域，裁剪之后当前路径之外的区域就不能够绘制可以通过save()和restore()恢复

5.合成 ctx.globalCompositeOperation = ‘source-over’ 新元素与旧元素之间的合并方式，有十一种常用 source-over(默认) destination-over copy

6.绘制图片 ctx.drawImage(); 第一个参数img(image,video,canvas) 里面传入的参数有三种当为三个参数时(x,y) x,y表示起始坐标点的位置为五个参数时(x,y,dx,dy) 起始点的坐标以及图片区域的长度与宽度九个参数时(x,y,dx,dy,x1,y1,w2,h2) 前四个参数为所绘制目标元素的起始点和宽度后四个参数为canvas绘制的起始点的大小

7.将canvas内容导出 canvas.toDataUrl() 注意此方法是canvas自身的方法不是上下文对象将canvas的内容抽成一张图片,base64编码，注意同源策略的限制将canvas的内容放在img元素内部