1# CanvasRenderingContext2D对象 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @sd-wu--> 5<!--Designer: @sunbees--> 6<!--Tester: @liuli0427--> 7<!--Adviser: @HelloCrease--> 8 9 10使用CanvasRenderingContext2D在canvas画布组件上进行绘制，绘制对象可以是矩形、文本。 11 12**示例：** 13 14```html 15<!-- xxx.hml --> 16<canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> 17<input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" /> 18 19``` 20 21 22```javascript 23// xxx.js 24export default { 25 handleClick() { 26 const el = this.$refs.canvas1; 27 const ctx = el.getContext('2d'); 28 ctx.beginPath(); 29 ctx.arc(100, 75, 50, 0, 6.28); 30 ctx.stroke(); 31 }, 32} 33``` 34 35  36 37 38## fillRect() 39 40填充一个矩形。 41 42**参数：** 43 44| 参数 | 类型 | 描述 | 45| -------- | -------- | -------- | 46| x | number | 指定矩形左上角点的x坐标。 | 47| y | number | 指定矩形左上角点的y坐标。 | 48| width | number | 指定矩形的宽度。 | 49| height | number | 指定矩形的高度。 | 50 51**示例：** 52 53  54 55 56 ```javascript 57 ctx.fillRect(20, 20, 200, 150); 58 ``` 59 60 61## fillStyle 62 63指定绘制的填充色。 64 65**参数：** 66 67| 参数 | 类型 | 描述 | 68| -------- | -------- | -------- | 69| color | <color> | 设置填充区域的颜色。 | 70 71**示例：** 72 73  74 75 76 ```javascript 77 ctx.fillStyle = '#0000ff'; 78 ctx.fillRect(20, 20, 150, 100); 79 ``` 80 81 82## strokeRect() 83 84绘制具有边框的矩形，矩形内部不填充。 85 86**参数：** 87 88| 参数 | 类型 | 描述 | 89| -------- | -------- | -------- | 90| x | number | 指定矩形的左上角x坐标。 | 91| y | number | 指定矩形的左上角y坐标。 | 92| width | number | 指定矩形的宽度。 | 93| height | number | 指定矩形的高度。 | 94 95**示例：** 96 97  98 99 100 ```javascript 101 ctx.strokeRect(30, 30, 200, 150); 102 ``` 103 104 105## fillText() 106 107绘制填充类文本。 108 109**参数：** 110 111| 参数 | 类型 | 描述 | 112| -------- | -------- | -------- | 113| text | string | 需要绘制的文本内容。 | 114| x | number | 需要绘制的文本的左下角x坐标。 | 115| y | number | 需要绘制的文本的左下角y坐标。 | 116 117**示例：** 118 119  120 121 122 ```javascript 123 ctx.font = '35px sans-serif'; 124 ctx.fillText("Hello World!", 20, 60); 125 ``` 126 127 128## lineWidth 129 130指定绘制线条的宽度值。 131 132**参数：** 133 134| 参数 | 类型 | 描述 | 135| -------- | -------- | -------- | 136| lineWidth | number | 设置绘制线条的宽度。 | 137 138**示例：** 139 140  141 142 143 ```javascript 144 ctx.lineWidth = 5; 145 ctx.strokeRect(25, 25, 85, 105); 146 ``` 147 148 149## strokeStyle 150 151设置描边的颜色。 152 153**参数：** 154 155| 参数 | 类型 | 描述 | 156| -------- | -------- | -------- | 157| color | <color> | 指定描边使用的颜色 | 158 159**示例：** 160 161  162 163 164 ```javascript 165 ctx.lineWidth = 10; 166 ctx.strokeStyle = '#0000ff'; 167 ctx.strokeRect(25, 25, 155, 105); 168 ``` 169 170 171### stroke()<sup>5+</sup> 172 173进行边框绘制操作。 174 175**示例：** 176 177 178 179 ```javascript 180 ctx.moveTo(25, 25); 181 ctx.lineTo(25, 105); 182 ctx.strokeStyle = 'rgb(0,0,255)'; 183 ctx.stroke(); 184 ``` 185 186 187### beginPath()<sup>5+</sup> 188 189创建一个新的绘制路径。 190 191**示例：** 192 193  194 195 196 ```javascript 197 ctx.beginPath(); 198 ctx.lineWidth = '6'; 199 ctx.strokeStyle = '#0000ff'; 200 ctx.moveTo(15, 80); 201 ctx.lineTo(280, 80); 202 ctx.stroke(); 203 ``` 204 205 206### moveTo()<sup>5+</sup> 207 208路径从当前点移动到指定点。 209 210**参数：** 211 212| 参数 | 类型 | 描述 | 213| -------- | -------- | -------- | 214| x | number | 指定位置的x坐标。 | 215| y | number | 指定位置的y坐标。 | 216 217**示例：** 218 219  220 221 ```javascript 222 ctx.beginPath(); 223 ctx.moveTo(10, 10); 224 ctx.lineTo(280, 160); 225 ctx.stroke(); 226 ``` 227 228 229### lineTo()<sup>5+</sup> 230 231从当前点到指定点进行路径连接。 232 233**参数：** 234 235| 参数 | 类型 | 描述 | 236| -------- | -------- | -------- | 237| x | number | 指定位置的x坐标。 | 238| y | number | 指定位置的y坐标。 | 239 240**示例：** 241 242 243 244 ```javascript 245 ctx.beginPath(); 246 ctx.moveTo(10, 10); 247 ctx.lineTo(280, 160); 248 ctx.stroke(); 249 ``` 250 251 252### closePath()<sup>5+</sup> 253 254结束当前路径形成一个封闭路径。 255 256**示例：** 257 258  259 260 261 ```javascript 262 ctx.beginPath(); 263 ctx.moveTo(30, 30); 264 ctx.lineTo(110, 30); 265 ctx.lineTo(70, 90); 266 ctx.closePath(); 267 ctx.stroke(); 268 ``` 269 270 271## font 272 273设置文本绘制中的字体样式。 274 275**参数：** 276 277| 参数 | 类型 | 描述 | 278| -------- | -------- | -------- | 279| value | string | 字体样式支持：sans-serif, serif, monospace，该属性默认值为30px HYQiHei-65S。 | 280 281**示例：** 282 283  284 285 286 ```javascript 287 ctx.font = '30px sans-serif'; 288 ctx.fillText("Hello World", 20, 60); 289 ``` 290 291 292## textAlign 293 294设置文本绘制中的文本对齐方式。 295 296**参数：** 297 298| 参数 | 类型 | 描述 | 299| -------- | -------- | -------- | 300| align | string | 可选值为：<br/>- left（默认）：文本左对齐；<br/>- right：文本右对齐；<br/>- center：文本居中对齐； | 301 302**示例：** 303 304  305 306 307 ```javascript 308 ctx.strokeStyle = '#0000ff'; 309 ctx.moveTo(140, 10); 310 ctx.lineTo(140, 160); 311 ctx.stroke(); 312 313 ctx.font = '18px sans-serif'; 314 315 // Show the different textAlign values 316 ctx.textAlign = 'left'; 317 ctx.fillText('textAlign=left', 140, 100); 318 ctx.textAlign = 'center'; 319 ctx.fillText('textAlign=center',140, 120); 320 ctx.textAlign = 'right'; 321 ctx.fillText('textAlign=right',140, 140); 322 ``` 323 324 325## arc()<sup>5+</sup> 326 327绘制弧线路径。 328 329**参数：** 330 331| 参数 | 类型 | 必填 | 描述 | 332| -------- | -------- | -------- | -------- | 333| x | number | 是 | 弧线圆心的x坐标值，单位：vp。 | 334| y | number | 是 | 弧线圆心的y坐标值，单位：vp。 | 335| radius | number | 是 | 弧线的圆半径，单位：vp。 | 336| startAngle | number | 是 | 弧线的起始弧度，单位：弧度。 | 337| endAngle | number | 是 | 弧线的终止弧度，单位：弧度。 | 338| anticlockwise | boolean | 否 | 是否逆时针绘制圆弧。<br/>true：逆时针方向绘制弧线。<br/>false：顺时针方向绘制弧线。<br/>默认值：false。 | 339 340**示例：** 341 342 343 344 ```javascript 345 ctx.beginPath(); 346 ctx.arc(100, 75, 50, 0, 6.28); 347 ctx.stroke(); 348 ``` 349 350 351### rect()<sup>5+</sup> 352 353创建矩形路径。 354 355**参数：** 356 357| 参数 | 类型 | 必填 | 描述 | 358| -------- | -------- | -------- | -------- | 359| x | number | 是 | 指定矩形的左上角x坐标值，单位：vp。 | 360| y | number | 是 | 指定矩形的左上角y坐标值，单位：vp。 | 361| width | number | 是 | 指定矩形的宽度，单位：vp。 | 362| height | number | 是 | 指定矩形的高度，单位：vp。 | 363 364**示例：** 365 366 367 368 ```javascript 369 ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20) 370 ctx.stroke(); // Draw it 371 ``` 372
