canvas学习笔记（二）

引言：此博所记录的文字，皆是在学习中所做的笔记。做一份详细的笔记，也是系统学习知识的一种不错的方法。

20. quadraticCurveTo - 二次贝塞尔曲线

1 context.quadraticCurveTo(P1x, P1y, P2x, P2y);
2 // P1x, P1y: 控制点的坐标
3 // P2x, P2y: 终点坐标

在线演示：quadraticCurveTo

21. bezierCurveTo - 三次贝塞尔曲线

1 context.bezierCurveTo(P1x, P1y, P2x, P2y, P3x, P3y);
2 // P1x, P1y: 第一个控制点的坐标
3 // P2x, P2y: 第二个控制点的坐标
4 // P3x, P3y: 终点的坐标

在线演示：bezierCurveTo

22. clip - 在指定区域内绘图

1 context.clip();

23. font - 设置文字

1 context.font = "bold italic 16px Arial";
2 // bold 设置粗体 - normal(默认)/bold/bolder
3 // italic 设置斜体 - normal(默认)/italic/oblique
4 // 16px 设置字号
5 // Arial 设置字体

在线演示：font-weight font-style

24. fillText - 绘制实心文字

1 context.fillText(text, dx, dy, maxWidth);
2 // text: 要绘制的文本
3 // dx, dy: 定位坐标
4 // maxWidth: 绘制的最大宽度

25. strokeText - 绘制空心文字

1 context.strokeText(text, dx, dy, maxWidth);
2 // text: 要绘制的文本
3 // dx, dy: 定位坐标
4 // maxWidth: 绘制的最大宽度

在线演示：drawText

扫描二维码关注公众号，回复： 983969 查看本文章

26. textAlign - 文字的水平对齐

1 context.textAlign = "start"/"end"/"left"/"right"/"center";
2 // "start"与"left"效果相同, "end"与"right"效果相同

在线演示：textAlign

27. textBaseline - 文字的垂直对齐

1 context.textBaseline = "alphabetic"/"hanging"/"ideographic"/"bottom"/"top"/"middle";

在线演示：textBaseline

28. drawImage - 绘制图片的三种方式

1 context.drawImage(image, dx, dy);
2 // image: 要绘制的对象
3 // dx,dy: image在canvas上的定位坐标

1 context.drawImage(image, dx, dy, dw, dh);
2 // image: 要绘制的对象
3 // dx, dy: image在canvas上的定位坐标
4 // dw, dh: image在canvas中即将绘制区域的宽度和高度

1 context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
2 // image: 要绘制的对象
3 // sx,sy: 裁剪image的起始坐标
4 // sw,sh: 裁剪image的宽度和高度
5 // dx,dy: 裁剪后的image在canvas上的定位坐标
6 // dw,dh:裁剪后的image在canvas中即将绘制区域的宽度和高度

29. 获取image对象的方式

1 // 获取HTML中的img标签
2 var image = document.getElementById("myImg");
3 // 新建Image对象
4 var image = new Image();

30. getImageData - 从canvas上获取像素数据

1 var imageData = context.getImageDate(x, y, w, h);
2 // x,y: 起点坐标
3 // w,h: 要获取区域的宽度和高度

31. putImageData - 将imageData(像素数据)绘制到canvas中

1 context.putImageData(imageData, dx, dy, sx, sy, sw, sh);
2 // imageData: 通过getImageData获取的像素数据
3 // dx,dy: 绘制图片的起始坐标
4 // sx,sy: 裁剪imageData的起始坐标(可忽略)
5 // sw,sh: 裁剪imageData的终止坐标(可忽略)

注：使用getImageData会涉及跨域问题，需在服务器环境中进行测试！

32. createImageData - 创建空的像素数据

1 var imageData = context.createImageData(sw, sh);
2 // 返回宽为sw,高为sh的空白像素数据
3 var imageData2 = context.createImageData(imageData);
4 // 返回宽度和高度均等于imageData的空白像素数据

canvas学习笔记（二）

猜你喜欢