harmony 鸿蒙CanvasRenderingContext2D对象

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

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  赞
  • 所属分类： 后端技术
  • 本文标签：
  • 版权声明： 原创文章如转载，请注明本文链接: https://m.seaxiang.com/blog/7d515858543d40e8bd79563a68188670
热门推荐
标签云
Linux Java Spring Spring Boot docker 大数据 前端 生活 maven golang 软件 spring cloud fintech mac vscode 其他 区块链 以太坊 V神 开发者 技术 股票 git greenplum 分布式事务 chrome mysql flink kafka 设计模式 原理 鸿蒙 seo
最新文章
本文目录