鸿蒙应用开发之canvas画布组件介绍

canvas画布组件用于自定义绘制图形。

方法：getContext和toDataURL

getContext：getContext('2d')函数用于获取2D绘图引擎，调用方法为var ctx = canvas.getContext(contextType, contextAttributes);其中contextType为必填项，目前仅支持2d，contextAttributes表示是否开启抗锯齿，默认为关闭。

toDataURL：生成一个包含图片展示的URL。

接下来通过一个实例来展示getContex的具体调用方法。

首先在index.hml文件中输入以下代码来添加一个canvas组件，其中属性”ref“的作用是可以在index.js文件中通过引用来获得canvas组件的对象实例，属性style的作用是可以设置canvas的样式，如背景颜色，宽和高等。

<div class="container" onswipe="toNextPage"><canvas class='canvas' ref="canvas" style="background-color: aliceblue;"></canvas>
</div>

然后再index.css文件中输入以下代码来设置canvas的样式。

.container {flex-direction: column;justify-content: flex-start;align-items: center;width: 454px;height: 454px;
}
.canvas{width: 383px;height: 180px;margin-top: 120px;
}

最后在index.css文件中输入以下代码。

var pressure=[];export default {data: {maxmin:[{mValue:0 //最大值},{mValue:0 //最小值}]},//将随机函数生成的值逐个放入pressure列表中，并且计算出其中的最大值和最小值分别赋值给以上两个mValueonInit(){   for(let i = 0;i<48;i++){pressure.push(this.getRandomInt(1,99));}this.maxmin[0].mValue = Math.max.apply(null,pressure);this.maxmin[1].mValue = Math.min.apply(null,pressure);},//随机函数getRandomInt(min,max){return Math.floor(Math.random()*(max-min+1))+min;},//调用getContext方法
onShow(){var context = this.$refs.canvas.getContext('2d');let leftTopX = 0;pressure.forEach(element => {context.fillStyle = this.getColorHexByValue(element);//设置颜色let leftTopY = 180 - element * 1.8;let width = 7;let height = element * 1.8;context.fillRect(leftTopX,leftTopY,width,height);//调用fillRect绘制矩形leftTopX +=8;});},//根据不同的值绘制不同颜色的矩形
getColorHexByValue(value){if (value>=80 && value<=99){return "#ffa500";}else if (value>=60 && value<=79){return "#ffff00";}else if (value>=30 && value<=59){return "00ffff"}else if (value>=1 && value<=29){return "#0000ff"}},

可得到以下图形。

getContext方法中还有许多绘制其它类型图形的函数，具体的可以查看官方文档JS API参考-CanvasRenderingContext2D对象 (harmonyos.com)

遇到的问题：在跟随书本进行实操的时候，发现图形不符合预期

检查了一遍代码确定与书本并无二致，于是查阅官方文档发现书本上在调用描绘矩形图的函数时，将height和weight两个参数放反了，正确的参数顺序应该是“左上角的x轴坐标”，左上角的y轴坐标“，”宽度“和”高度“。

鸿蒙应用开发之canvas画布组件介绍相关推荐

Android开发之旅：组件生命周期（二）
引言应用程序组件有一个生命周期--一开始Android实例化他们响应意图,直到结束实例被销毁.在这期间,他们有时候处于激活状态,有时候处于非激活状态:对于活动,对用户有时候可见,有时候不可见.组件生 ...
【Unity3D-UGUI系列】（一）Canvas 画布组件详解
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享简书地址我的个人博客 QQ群:1040082875 大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉 ...
android studio开发工具介绍,Android应用开发之Android开发工具介绍、Android Studio配置...
本文将带你了解Android应用开发之Android开发工具介绍.Android Studio配置,希望本文对大家学Android有所帮助. 2.1 Android Studio配置 2.1.1 ...
Android开发之Canvas rotate方法释疑
Canvas的rotate()函数本应该是很简单的一个函数,但是由于api手册言之不详,使用中难免有吃不准的地方.下面所记录的几点,都是我在使用中所迷惑过的问题,特此记录. 1,坐标原点在哪里? 如果 ...
前端实现图片快速反转替换_HTML5开发之canvas实现元素图片镜像翻转动画效果的方法...
一.Canvas图片水平镜像翻转效果预览您可以狠狠的点击这里:canvas图片水平镜像翻转动画demo demo页面中点击图片动画效果可见. 二.Canvas上实现图片镜像翻转的实现 CSS中要想实 ...
python动态换图tkinter库的Canvas画布组件
之前做统计彩票程序,然后想做个窗口程序在窗口里动态的想换哪个统计图表就看哪个,结果半天都做不好,网上各种混乱的代码几乎没一个能用的,最后干脆曲线救国,统计完之后统计视图自动保存成图片,这个比较简单,用 ...
HC32F460开发之rtthread+finsh组件的移植
文章目录前言一.RT-Thread简介二.rtthread的移植 1.裸机例程 2.RT-Thread下载 3.RT-Thread移植 4.finsh组件移植总结前言对于从事单片机的开发人 ...
Flutter开发之BottomSheetDialog选择组件-5（44）
BottomSheetDialog.ModalBottomSheetDialog同样也是需要借助showDialog唤起,就跟它名字一样,这两种dialog是从屏幕下方向上弹出的,不同的是Bottom ...
Flutter开发之Tooltip提示组件-3（42）
Tooltip支持用户传入任意一个child作为显示的Widget,并且在用户长按Widget时,会在上方或者下方出现类似Toast的提示,隔一段时间自动消失,由于使用起来比较简单,很好的用户提示体验 ...

鸿蒙应用开发之canvas画布组件介绍

鸿蒙应用开发之canvas画布组件介绍相关推荐

最新文章

热门文章