harmony 鸿蒙CanvasRenderingContext2D对象

  • 2023-06-24
  • 浏览 (698)

CanvasRenderingContext2D对象

使用CanvasRenderingContext2D在canvas画布组件上进行绘制,绘制对象可以是矩形、文本。

示例:

<!-- xxx.hml -->
<canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
<input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />

// xxx.js
export default {
  handleClick() {
    const el = this.$refs.canvas1;
    const ctx = el.getContext('2d');
    ctx.beginPath();
    ctx.arc(100, 75, 50, 0, 6.28);
    ctx.stroke();
  },
}

zh-cn_image_0000001431548113

fillRect()

填充一个矩形。

参数:

参数 类型 描述
x number 指定矩形左上角点的x坐标。
y number 指定矩形左上角点的y坐标。
width number 指定矩形的宽度。
height number 指定矩形的高度。

示例:

zh-cn_image_0000001431388525

  ctx.fillRect(20, 20, 200, 150);

fillStyle

指定绘制的填充色。

参数:

参数 类型 描述
color &lt;color&gt; 设置填充区域的颜色。

示例:

zh-cn_image_0000001431388505

  ctx.fillStyle = '#0000ff';
  ctx.fillRect(20, 20, 150, 100);

strokeRect()

绘制具有边框的矩形,矩形内部不填充。

参数:

参数 类型 描述
x number 指定矩形的左上角x坐标。
y number 指定矩形的左上角y坐标。
width number 指定矩形的宽度。
height number 指定矩形的高度。

示例:

zh-cn_image_0000001381268264

  ctx.strokeRect(30, 30, 200, 150);

fillText()

绘制填充类文本。

参数:

参数 类型 描述
text string 需要绘制的文本内容。
x number 需要绘制的文本的左下角x坐标。
y number 需要绘制的文本的左下角y坐标。

示例:

zh-cn_image_0000001431548109

  ctx.font = '35px sans-serif';
  ctx.fillText("Hello World!", 20, 60);

lineWidth

指定绘制线条的宽度值。

参数:

参数 类型 描述
lineWidth number 设置绘制线条的宽度。

示例:

zh-cn_image_0000001431548121

  ctx.lineWidth = 5;
  ctx.strokeRect(25, 25, 85, 105);

strokeStyle

设置描边的颜色。

参数:

参数 类型 描述
color &lt;color&gt; 指定描边使用的颜色

示例:

zh-cn_image_0000001380789172

  ctx.lineWidth = 10;
  ctx.strokeStyle = '#0000ff';
  ctx.strokeRect(25, 25, 155, 105);

stroke()5+

进行边框绘制操作。

示例:

zh-cn_image_0000001431388513

  ctx.moveTo(25, 25);
  ctx.lineTo(25, 105);
  ctx.strokeStyle = 'rgb(0,0,255)';
  ctx.stroke();

beginPath()5+

创建一个新的绘制路径。

示例:

zh-cn_image_0000001431548125

  ctx.beginPath();              
  ctx.lineWidth = '6';
  ctx.strokeStyle = '#0000ff';
  ctx.moveTo(15, 80); 
  ctx.lineTo(280, 160);
  ctx.stroke();

moveTo()5+

路径从当前点移动到指定点。

参数:

参数 类型 描述
x number 指定位置的x坐标。
y number 指定位置的y坐标。

示例:

zh-cn_image_0000001431388529

  ctx.beginPath();
  ctx.moveTo(10, 10);
  ctx.lineTo(280, 160);
  ctx.stroke();

lineTo()5+

从当前点到指定点进行路径连接。

参数:

参数 类型 描述
x number 指定位置的x坐标。
y number 指定位置的y坐标。

示例:

zh-cn_image_0000001431148365

  ctx.beginPath();
  ctx.moveTo(10, 10);
  ctx.lineTo(280, 160);
  ctx.stroke();

closePath()5+

结束当前路径形成一个封闭路径。

示例:

zh-cn_image_0000001381268284

  ctx.beginPath();
  ctx.moveTo(30, 30);
  ctx.lineTo(110, 30);
  ctx.lineTo(70, 90);
  ctx.closePath();
  ctx.stroke();

font

设置文本绘制中的字体样式。

参数:

参数 类型 描述
value string 字体样式支持:sans-serif,&nbsp;serif,&nbsp;monospace,该属性默认值为30px&nbsp;HYQiHei-65S。

示例:

zh-cn_image_0000001381108328

  ctx.font = '30px sans-serif';
  ctx.fillText("Hello World", 20, 60);

textAlign

设置文本绘制中的文本对齐方式。

参数:

参数 类型 描述
align string 可选值为:
-&nbsp;left(默认):文本左对齐;
-&nbsp;right:文本右对齐;
-&nbsp;center:文本居中对齐;

示例:

zh-cn_image_0000001431388517

  ctx.strokeStyle = '#0000ff';
  ctx.moveTo(140, 10);
  ctx.lineTo(140, 160);
  ctx.stroke();
  
  ctx.font = '18px sans-serif';    
  
  // Show the different textAlign values
  ctx.textAlign = 'left';      
  ctx.fillText('textAlign=left', 140, 100);
  ctx.textAlign = 'center';     
  ctx.fillText('textAlign=center',140, 120);              
  ctx.textAlign = 'right';      
  ctx.fillText('textAlign=right',140, 140);

arc()5+

绘制弧线路径。

参数:

参数 类型 描述
x number 弧线圆心的x坐标值。
y number 弧线圆心的y坐标值。
radius number 弧线的圆半径。
startAngle number 弧线的起始弧度。
endAngle number 弧线的终止弧度。
anticlockwise boolean 是否逆时针绘制圆弧。

示例:

zh-cn_image_0000001381108320

  ctx.beginPath();
  ctx.arc(100, 75, 50, 0, 6.28);
  ctx.stroke();

rect()5+

创建矩形路径。

参数:

参数 类型 描述
x number 指定矩形的左上角x坐标值。
y number 指定矩形的左上角y坐标值。
width number 指定矩形的宽度。
height number 指定矩形的高度。

示例:

zh-cn_image_0000001381108312

  ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20)
  ctx.stroke(); // Draw it

你可能感兴趣的鸿蒙文章

harmony 鸿蒙兼容JS的类Web开发范式(ArkUI.Lite)

harmony 鸿蒙通用属性

harmony 鸿蒙通用事件

harmony 鸿蒙通用样式

harmony 鸿蒙chart

harmony 鸿蒙image-animator

harmony 鸿蒙image

harmony 鸿蒙input

harmony 鸿蒙marquee

harmony 鸿蒙picker-view

0  赞