近期的工作中，遇到的功能需求，需要控制文字显示行数，超过就省略号显示。 一般文字行数控制用 css 就可以实现，但在 canvas 中不行。在网站查询资料，就可以发现需要程序控制文字换行，主要使用到的方法是 measureText()，这个方法会返回一个度量文本的相关信息的对象…

CanvasRenderingContext2D.rotate() 是 Canvas 2D API 在变换矩阵中增加旋转的方法。角度变量表示一个顺时针旋转角度并且用弧度表示。 Canvas 2D API 中的 CanvasRenderingContext2D.drawImage…

1. touchstart：当手指触摸屏幕时，获取初始坐标，lastPos.x，lastPos.y。 2. touchmove: 当手指在屏幕上滑动的时，获取当前坐标，curLoc.x,curLoc.y。 如果直接用鼠标点击的坐标在canvas上绘图的话，会发现，画出来的线，坐…

这个比较简洁，不过图片太大会内存溢出。

图片处理 在前端业务中并不陌生。例如手机自带相机拍出的照片通常好几兆，但如果只是用作头像就显然太大，需要 图片压缩 后再上传服务器；再例如前段时间比较火的迎国庆换头像，就用到了 图片与图片的合成。本文将介绍前端常见的 Canvas 图片处理方法。 图片插入文字 主要用了 fil…

在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的. 在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的. 当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。 文本对齐选项. 可选…

文章介绍了canvas的基础应用，包括绘制图形、文本、图像、动画等，，以及canvas的一些基础方法

在实现自定义控件的过程中，常常会有绘制居中文字的需求，于是在网上搜了一些相关的博客，总是看的一脸懵逼，就想着自己分析一下，在此记录下来，希望对大家能够有所帮助。 有点难理解，举个栗子，上文中的x、y参数传的是（0，0），此时的baseline正好是坐标系中x轴，就相当于从y轴开…

如果我们用 Canvas 实现了一些动画效果，需要将它回放出来，很多人通常就是用录屏工具将屏幕内容录下来播放，很少有人知道，Canvas 可以直接通过现代浏览器支持的 Media Streams API 来转成视频。 Canvas 对象支持 captureStream 方法，这…