Canvas组件及运用

于 2024-09-08 22:17:51 发布
阅读量722 收藏 10
点赞数 4
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79654063/article/details/142033955
版权

画布(Canvas)组件主要用于自定义绘制图形，开发者使用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象在Canvas组件上进行绘制，绘制对象可以是基础形状、文本、图片等。

一.Canvas

提供画布组件，用于自定义绘制图形。

接口：
Canvas(context?: CanvasRenderingContext2D)
参数：
参数名参数类型必填默认值参数描述
contextCanvasRenderingContext2D否_不支持多个Canvas共用一个CanvasRenderingContext2D对象，具体描述见CanvasRenderingContext2D对象。

Canvas 组件需要一个 context 控制绘图

二.CanvasRenderingContext2D

使用RenderingContext在Canvas组件上进行绘制，绘制对象可以是矩形、文本、图片等。

接口：

CanvasRenderingContext2D(settings?: RenderingContextSetting)

参数：
参数名参数类型必填参数描述
settingsRenderingContextSettings否见RenderingContextSettings

可以传入 settings 参数，是否开启抗锯齿

三. RenderingContextSetting

用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。

接口：

RenderingContextSettings(antialias?: boolean)

参数：

参数名

参数类型

必填

参数描述

antialias

boolean

否

表明canvas是否开启抗锯齿。

默认值：false

四.运用Canvas组件绘制天气曲线

 
@Entry
@Component
struct csPage {
  tempMax : number[] = [21, 38, 17, 21, 21, 32, 24, 22, 25, 33, 24, 26, 25, 34, 28];
  tempMin : number[] = [14, 21, 12, 13, 18, 23, 17, 15, 13, 18, 18, 10, 15, 24, 20];
  weatherDates: string[] = ['05/04', '05/05', '05/06', '05/07', '05/08', '05/09', '05/10', '05/11', '05/12', '05/13', '05/14', '05/15', '05/16', '05/17', '05/18'];
  weatherConditions: string[] = ['小雨', '多云', '多云', '晴', '晴', '小雨', '大雨', '晴', '多云', '多云', '小雨', '晴', '晴', '多云', '小雨'];
  icon: string[] =              ['100', '101', '102', '103', '104', '300', '301', '302', '303', '304', '305', '306', '307', '308', '309'];
  windDirDay: string[] =              ['西南风', '西南风', '西南风', '西南风', '西南风', '西南风', '西南风', '西南风', '西南风', '西南风', '西南风', '西南风', '西南风', '西南风', '西南风'];
  windScaleDay: string[] =              ['1-2', '1-2', '1-2', '1-2', '1-2', '1-2', '1-2', '1-2', '1-2', '1-2', '1-2', '1-2', '1-2', '1-2', '1-2'];
 
  // 定义左右边距
  sideMargin: number = 40; // 根据需要调整
  //使用RenderingContext在Canvas组件上进行绘制，绘制对象可以是矩形、文本、图片等。
  settings: RenderingContextSettings = new RenderingContextSettings(true);
  context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  // canvasHeight：表示曲线图高度，itemWidth：表示每两天的温度点之间的距离。
  canvasHeight: number = 250;
  itemWidth: number = 50;
 
 
 
  build() {
    Row() {
      Column({ space: 15 }) {
        Text('7天趋势预报')
          .fontSize(18)
          .padding(10)
          .margin({top:15})
          .fontWeight(FontWeight.Bold)
        Scroll() {
          Canvas(this.context)
            .width(this.tempMax.length * this.itemWidth + this.itemWidth + this.sideMargin * 2)
            .height('100%')
            .onReady(() => {
              //找出高温曲线的最大值，和低温曲线的最小值，用于后续确定曲线竖直方向的比例
              const maxTemperature: number = Math.max(...this.tempMax);
              const minTemperature: number = Math.min(...this.tempMin);
              //最高-最低温度的上下距离 step 表示每改变 1℃，纵坐标改变的高度
              const step: number = this.canvasHeight * 0.4 / (maxTemperature - minTemperature);
              const curveChartMargin: number = this.canvasHeight * 0.09;
 
              //设置曲线样式
              this.context.lineWidth = 1;
              this.context.font = '13vp sans-serif';
              this.context.fillStyle = '#000000';
              this.context.strokeStyle = 'blue'
              this.context.globalAlpha = 1;
              this.context.textAlign='start'
 
              //由于同一天的高温点、低温点的x坐标相同，所以x坐标使用同一组数据。
              let xPos: number[] = [];
              let tempMaxPos: number[] = [];
              let tempMin: number[] = [];
              //确定温度点的坐标，再绘制，并绘制温度文字
              for (let i: number = 0; i < this.tempMax.length; i++) {
                // 确定每个点的坐标，包括高温和低温，其中，高温和低温坐标的横坐标都是一致的
                let x: number = this.sideMargin + (i * this.itemWidth);
                let yHeight: number = this.canvasHeight - (curveChartMargin + (this.tempMax [i] - minTemperature) * step);
                let yLow: number = this.canvasHeight - (curveChartMargin + (this.tempMin[i] - minTemperature) * step);
 
                // 存放数据
                xPos.push(x);
                tempMaxPos.push(yHeight);
                tempMin.push(yLow);
 
                // 给每个点画出一个圆并填充颜色，这里设置圆的半径为2
                this.context.fillStyle = "blue"; // 设置低温点颜色为蓝色
                let region: Path2D = new Path2D();
                region.ellipse(x, yHeight, 2, 2, 0, 0, Math.PI * 2);
                region.ellipse(x, yLow, 2, 2, 0, 0, Math.PI * 2);
                this.context.fill(region);
 
 
 
                // 绘制日期
                this.context.fillStyle = "black"; // 可以设置文字颜色
                let dateStr: string = this.weatherDates[i];
                this.context.fillText(dateStr, x - this.context.measureText(dateStr).width / 2,  20);
                let highWindDirDayStr:string=this.windDirDay[i]
                this.context.fillText(highWindDirDayStr,x-this.context.measureText(highWindDirDayStr).width/2,35)
                // 绘制天气图标
                let icon: string = Q_Weather_Image(this.icon[i]);
                let   imgIcon = new ImageBitmap(icon)
                this.context.drawImage(imgIcon,x - this.context.measureText(dateStr).width / 2,45, 30, 30);
                // 绘制天气状态
                let  highConditionStr: string = this.weatherConditions[i];
                this.context.fillText(highConditionStr, x - this.context.measureText(highConditionStr).width / 2, 90);
 
 
 
 
                // 绘制高温低温的文字
                this.context.fillStyle = "black"; // 可以设置文字颜色
                let maxTemperatureStr: string = `${this.tempMax[i]}℃`;
                let minTemperatureStr: string = `${this.tempMin[i]}℃`;
                this.context.fillText(maxTemperatureStr, x - this.context.measureText(maxTemperatureStr).width / 2, yHeight - 6);
                this.context.fillText(minTemperatureStr, x - this.context.measureText(minTemperatureStr).width / 2, yLow + 15);
 
 
                // 绘制天气状态
                let conditionStr: string = this.weatherConditions[i];
                this.context.fillText(conditionStr, x - this.context.measureText(conditionStr).width / 2, this.canvasHeight + 60);
                //绘制风向
                let  windDirDayStr:string=this.windDirDay[i]
                this.context.fillText(windDirDayStr,x-this.context.measureText(windDirDayStr).width/2,this.canvasHeight+77)
                //绘制风向等级
                let windScaleDayStr:string= `${this.windScaleDay[i]}级`
                this.context.fillText(windScaleDayStr,x-this.context.measureText(windScaleDayStr).width/2,this.canvasHeight+95)
                // 绘制天气图标
                // 下载并绘制天气图标
                let iconUrl: string = Q_Weather_Image(this.icon[i]);
                let   img = new ImageBitmap(iconUrl)
                this.context.drawImage(img,x - this.context.measureText(windScaleDayStr).width / 2.2, this.canvasHeight+ 15, 30, 30);
 
 
              }
 
              // 绘制高温曲线
              this.context.beginPath();
              this.context.moveTo(xPos[0], tempMaxPos[0]);
              for (let i: number = 1; i < xPos.length; i++) {
                //let x0: number = i * this.itemWidth;
                // let x0: number = sideMargin + i * this.itemWidth;
                // let y0: number = this.canvasHeight - (curveChartMargin + (this.tempMax[i - 1] - minTemperature) * step);
                let x0: number = xPos[i - 1];
                let y0: number = tempMaxPos[i - 1];
                this.context.bezierCurveTo(x0 + (xPos[i] - x0) * 0.3, y0, xPos[i] - (xPos[i] - x0) * 0.3, tempMaxPos[i], xPos[i], tempMaxPos[i]);
              }
              this.context.stroke();
 
              // 绘制低温曲线
              this.context.beginPath();
              this.context.moveTo(xPos[0], tempMin[0]);
              for (let i: number = 1; i < xPos.length; i++) {
               // let x0: number = i * this.itemWidth;
               //  let x0: number = sideMargin + i * this.itemWidth;
               //  let y0: number = this.canvasHeight - (curveChartMargin + (this.tempMin[i - 1] - minTemperature) * step);
                let x0: number = xPos[i - 1];
                let y0: number = tempMin[i - 1];
                this.context.bezierCurveTo(x0 + (xPos[i] - x0) * 0.3, y0, xPos[i] - (xPos[i] - x0) * 0.3, tempMin[i], xPos[i], tempMin[i]);
              }
              this.context.stroke();
            });
        }
        .scrollable(ScrollDirection.Horizontal)
        .scrollBar(BarState.Off);
      }
      .width('100%')
      .height('60%')
      .backgroundColor($r('app.color.home_bg'))
      .borderRadius(20)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor($r('app.color.daily_bg'))
 
  }
}
 
function Q_Weather_Image(img: string): string {
  let url = `https://a.hecdn.net/img/common/icon/202106d/${img}.png`;
  return url;
}

hyem
关注
封装canvas各种方法的vue组件
09-07
封装canvas各种方法的vue组件、文字、多行文字7矩形、图片功能的vue；canvas组件
微信小程序Canvas绘图组件 - mp_canvas_drawer
最新发布
gitblog_00863的博客
08-10 450
微信小程序Canvas绘图组件 - mp_canvas_drawer mp_canvas_drawerkuckboy1994/mp_canvas_drawer: 是一个用于在Minecraft游戏中绘制图形的库。适合用于需要自定义Minecraft游戏界面的开发者。特点是可以提供一系列绘图工具，支持在游戏中绘制2D和3D图形。项目地址:https://gitcode.com/gh_mirrors...
Unity3d中UGUI组件精简复盘（二）Canvas及其相关组件
qq_1628941121的博客
06-09 3413
Canvas组件 canvas的三种渲染模式 所有的UI元素只有在Canvas下才能够正常显示 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eYp0n4he-1622920236081)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210529205615721.png)] Screen Space - Overlay：UI元素始终在3D物体之上的 [外链图片转存失败,源站
canvas 组件基础学习
jhg6452的博客
09-04 940
canvas组件的基本运用
Unity UGUI的Canvas（画布）组件的介绍及使用
alianblank的博客
07-10 4556
Canvas（画布）是Unity UGUI系统中的一个重要组件，用于在屏幕上绘制UI元素。它是UI元素的容器，可以包含各种UI元素，如按钮、文本、图像等。Canvas组件提供了一种方便的方式来管理和渲染UI元素。
【HTML】【一文全解Canvas】从初学到实战，彻底掌握前端绘图神器！
热门推荐
weixin_55846296的博客
06-09 1万+
前言一、Canvas 概述二、在 HTML 中使用 Canvas三、Canvas 绘制图形1、绘制矩形2、绘制圆形a. 绘制实心圆形b. 绘制空心圆形四、Canvas 绘制文本五、Canvas 绘制图片六、Canvas 动画效果1、setInterval() 实现动画2、requestAnimationFrame() 实现动画七、Canvas 使用注意事项八、利用Canvas绘制挂钟（原理-绘制弧形）- 简单练习1、 还原坐标系2、 绘制背景3、 绘制时钟指针4、循环绘制。
鸿蒙OS开发使用Canvas组件绘制天气曲线图
老邓头
08-07 663
效果图： 原理 使用贝塞尔曲线 首先可以了解一下贝塞尔曲线。如果看不懂也没关系，这里会直接讲绘制曲线的步骤。首先使用beginPath方法确定起始点。这里会循环地用到bezierCurveTo（三次贝塞尔曲线）方法。该方法需要三个点的坐标，即图上的点1、2、3。这里的点3就表示温度的点。为了让曲线更平滑，我们让点1的高度与起始 鸑鷟407 HarmonyOS开发者社区。参考下文： 鸿蒙征文 | 使用Canvas组件绘制天气曲线图_harmonyos_鸑鷟407-HarmonyOS开发者社区。
【泰裤辣 の Unity百宝箱】Canvas组件四件套讲解
dagongrenxiaoqi的博客
05-16 433
在上一期内容中，我分享了一套简单易用的UI框架。没想到大家的学习热情这么高，讨论度是目前所有内容最高的。由此可见，天下苦UI(秦)久已！！！接下去，我们继续深入探讨UI这个话题。Canvas四件套,什么是四件套呢？Canvas组件Canvas Scaler组件Graphics Raycaster组件Canvas Group组件在每次创建UI界面时，默认会为我们添加前三个组件，而最后一个组件在很多时候也非常常用。今天统一对这四个组件进行讲解~
微信小程序canvas组件应用Demo
01-08
cavas组件编辑图片，添加文字，修改背景颜色等，来源为github
基于canvas 2D实现微信小程序自定义组件-环形进度条
06-11
在微信小程序开发中，自定义组件是提升代码复用性和应用可维护性的重要手段。本教程将探讨如何利用canvas 2D ...通过理解并熟练运用canvas绘图原理，开发者可以创建出各种复杂且动态的UI组件，提升小程序的用户体验。
基于vue+canvas的excel-like组件实例详解
08-28
在现代Web应用开发中，Vue.js是一个非常流行的前端框架，它提供了一套高效、易用的组件化开发方案。在处理大数据量的表格时，传统的HTML表格元素可能会面临性能瓶颈。为了解决这一问题，开发者通常会寻找替代方案，...
微信小程序 Canvas增强组件实例详解及源码分享
08-31
总的来说，WeZRender为微信小程序的Canvas组件提供了强大的图形绘制、丰富的图形选项、流畅的动画效果以及易于扩展的能力，极大地提升了开发效率和用户体验。对于需要在微信小程序中实现动态图形和动画的开发者来说...
Canvas对象依附的Canvas组件讲解（有图）
qq_54087271的博客
08-31 936
Canvas对象依附的Canvas组件讲解（有图）
常用业务js组件：canvas绘图、时间戳转换、正则验证、深拷贝等
mosowe
03-03 1020
先推荐一个npm包【mosowejs】，对没错，用我的专用名称命名的js，点击可以查看示例，手机，PC均可，内部包含了N多日常开发用到的： 正则验证（手机号，座机号，中英文，数字，url等等）， 常用的一些方法（时间格式化-年月日时分秒季度周数天数，数字千分位，数据脱敏，数据千分位，复制等等等）， 一些数据类型判断（移动端PC判断、object，number，string…） 常用canvas绘图（海报图，裁剪类的有涂抹裁剪，多边形裁剪）基于document开发，同类的跨端插件uniapp点此 支持NP
vue 使用canvas 详细教程
一步一个脚印，踏实努力，向着目标前进
09-12 8444
Vue.js 是一个流行的 JavaScript 框架，用于构建用户界面。它提供了一种简洁的方式来管理和渲染数据，同时也支持与其他库和工具的集成。方法获取当前的时间，并根据小时、分钟和秒钟的值计算出指针的位置。然后，我们定义了一些函数来绘制时钟的各个部分。方法绘制了一个填充整个 Canvas 的矩形。方法绘制一个矩形路径，并使用。方法绘制一个圆形路径，并使用。方法开始一个新的路径，使用。方法开始一个新的路径，使用。函数，实现时钟的动态效果。函数用于绘制时钟的外圆，函数用于绘制时钟的刻度，
前端Canvas组件学习
m0_70968573的博客
11-20 487
本文介绍如何利用canvas组件在网页中绘制图表
鸿蒙HarmonyOS实战-ArkUI组件（Canvas）
shudaoshanQAQ的博客
01-06 2684
Canvas组件是一种图形渲染组件，它提供了一个画布（canvas），开发者可以在上面绘制各种图形、文本等。Canvas组件通常用于创建游戏、数据可视化等需要动态绘制图形的应用程序。
【前端】Canvas 库推荐
我是Superman丶的博客
05-28 1611
【前端】Canvas 库推荐LeaferJS绚丽多彩的 HTML5 Canvas 2D 图形渲染引擎可结合 AI 绘图、生成界面。
vue canvas组件
08-16
Vue Canvas 组件是一个用于在Vue应用中实现绘图功能的组件。它可以让你在HTML5的Canvas元素上进行绘图操作，包括绘制图形、添加文本、绘制路径等。 要创建一个Vue Canvas组件，首先需要在Vue应用中导入Canvas元素，并将其添加到组件的模板中。然后，可以通过在组件的方法中使用Canvas的API来执行绘图操作。 以下是一个简单的Vue Canvas组件的示例： ```vue <template> <div> <canvas ref="canvas"></canvas> </div> </template> <script> export default { mounted() { this.draw(); }, methods: { draw() { const canvas = this.$refs.canvas; const ctx = canvas.getContext('2d'); // 绘制一个矩形 ctx.fillStyle = 'red'; ctx.fillRect(50, 50, 100, 100); // 绘制一条线段 ctx.beginPath(); ctx.moveTo(200, 200); ctx.lineTo(300, 200); ctx.strokeStyle = 'blue'; ctx.lineWidth = 5; ctx.stroke(); // 添加文本 ctx.font = '24px sans-serif'; ctx.fillStyle = 'black'; ctx.fillText('Hello, Vue Canvas!', 50, 300); } } } </script> <style scoped> canvas { border: 1px solid black; } </style> ``` 在上面的示例中，我们在mounted钩子函数中调用了draw方法来执行绘图操作。draw方法通过获取canvas元素的上下文（context），使用上下文的API来绘制矩形、线段和文本。 注意，我们使用了Vue的ref属性来引用canvas元素，这样我们就可以在组件的JavaScript代码中轻松地访问canvas并进行绘图操作。 希望这个简单示例可以帮助你开始使用Vue Canvas组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值