引言:此博所记录的文字,皆是在学习中所做的笔记。做一份详细的笔记,也是系统学习知识的一种不错的方法。
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
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的空白像素数据