canvas基础绘制方法介绍
canvas是arkui开发框架里的画布组件，常用于自定义绘制图形。因为其轻量、灵活、高效等优点，被广泛应用于ui界面开发中。本期，我们将为大家介绍canvas组件的使用。
一、canvas介绍
1. 什么是canvas?
在web浏览器中，canvas是一个可自定义width、height的矩形画布，画布左上角为坐标原点，以像素为单位，水平向右为x轴，垂直向下为y轴，画布内所有元素的位置基于原点进行定位。如图1所示，我们通过标签，创建了一个width=1500px，height=900px的空白画布，我们还需要“画笔”才能绘制图形。canvas采用轻量的逐像素渲染机制，以js为“画笔”直接控制画布像素，从而实现图形绘制。
图1 canvas画布
2. canvas的“画笔”
canvas本身虽不具备绘制能力，但是提供了获取“画笔”的方法。开发者可通过getcontext('2d')方法获取canvasrenderingcontext2d对象完成2d图像绘制，或通过getcontext('webgl')方法获取webglrenderingcontext对象完成3d图像绘制。
目前，arkui开发框架中的webgl1.0及webgl2.0标准3d图形绘制能力正在完善中，所以本文将着重介绍2d图像的绘制。如图2所示，是canvasrenderingcontext2d对象提供的部分2d图像绘制方法，丰富的绘制方法让开发者能高效的绘制出矩形、文本、图片等。
图2 图像绘制方法
另外，开发者还可以获取offscreencanvasrenderingcontext2d对象进行离屏绘制，绘制方法同上。当绘制的图形比较复杂时，频繁的删除与重绘会消耗很多性能。开发者可根据自身的需求灵活选取canvas的渲染方式。这时，开发者可以根据自身的需求灵活选取离屏渲染的方式，通过创建offscreencanvas对象作为一个缓冲区，然后将需要绘制的内容先绘制在offscreencanvas上，最后再将offscreencanvas绘制到主画布上，以提高画布性能，确保绘图的质量。
二、canvas基础绘制方法
通过上节对canvas组件的基本介绍，相信大家对canvas组件已经有了一定的认识，下面我们将为大家实际演示canvas组件在arkui开发框架中的使用方法。arkui开发框架参考web浏览器中canvas的设计，并在“类web开发范式”及“声明式开发范式”两种开发范式中进行提供，接下来我们将分别介绍这两种开发范式中canvas的使用。
1. 类web开发范式中canvas的绘制方法
类web开发范式，使用hml标签文件进行布局搭建、css文件进行样式描述，并通过js语言进行逻辑处理。目前，js语言的canvas绘图功能已经基本上完善，下面我们将通过两个示例，展示基于js语言的canvas组件基础使用方法。
(1)矩形填充
canvasrenderingcontext2d对象提供了fillrect(x, y, width,height)方法，用于绘制一个填充的矩形。如图3所示，在画布内绘制了一个黑色的填充矩形，x与y指定了在canvas画布上所绘制的矩形的左上角(相对于原点)的坐标，width和height则设置了矩形的尺寸。
图3 填充的矩形
示例代码如下：
//创建一个width=1500px，height=900px的画布 canvas>div>
//xxx.jsexport default { onshow() { const el =this.$refs.canvas; //获取2d绘制对象 const ctx = el.getcontext('2d'); //设置填充为黑色 ctx.fillstyle = '#000000'; //设置填充矩形的坐标及尺寸 ctx.fillrect(200, 200, 300, 300); }} (2)缩放与阴影
canvasrenderingcontext2d对象提供了scale(x,y)方法，参数x表示横轴方向上缩放倍数，y表示纵轴方向上缩放的倍数，值得注意的是缩放过程中定位也会被缩放。如图4所示，是将上个示例中的填充矩形通过 scale(2,1.5)进行缩放，并通过shadowblur方法加上阴影后的效果。
图4 缩放与添加阴影后的效果
示例代码如下：
//xxx.jsexport default { onshow() { const el =this.$refs.canvas; const ctx = el.getcontext('2d'); //设置绘制阴影的模糊级别 ctx.shadowblur = 80; ctx.shadowcolor = 'rgb(0,0,0)'; ctx.fillstyle = 'rgb(0,0,0)'; // x scale to 200%,y scale to 150% ctx.scale(2, 1.5); ctx.fillrect(200, 200, 300, 300); }} 2. 声明式开发范式中canvas的绘制方法
声明式开发范式，采用ts语言并进行声明式ui语法扩展，从组件、动效和状态管理三个维度提供了ui绘制能力。目前，ets语言已经提供了canvas组件绘制能力，但功能仍在完善中。下面我们将通过两个示例，展示声明式开发范式中canvas组件的基础使用方法。
(1)图片叠加
如图5所示，是三张图片叠加的效果，顶层的图片覆盖了底层的图片。通过依次使用drawimage(x,y, width, height)方法设置图片坐标及尺寸，后面绘制的图片自动覆盖原来的图像，从而达到预期效果。
图5 图片叠加
扩展的ts语言采用更接近自然语义的编程方式，让开发者可以直观地描述ui界面，示例代码如下：
@entry@componentstruct indexcanvas1 { private settings:renderingcontextsettings = new renderingcontextsettings(true);//获取绘图对象 private ctx: renderingcontext = new renderingcontext(this.settings);//列出所要用到的图片 private img:imagebitmap = new imagebitmap(common/bg.jpg); build() { column() { //创建canvas canvas(this.ctx) .width(1500) .height(900) .border({color:blue,width:1,}) .backgroundcolor('#ffff00') //开始绘制 .onready(() => { this.ctx.drawimage( this.img,400,200,540,300); this.ctx.drawimage( this.img,500,300,540,300); this.ctx.drawimage( this.img,600,400,540,300); }) } .width('100%') .height('100%') }} (2)点击创建线性渐变
如图6所示，在画布中是一个线性渐变效果。本示例基于canvas扩展了一个button组件，通过点击“click”按钮，触发onclick()方法，并通过调用createlineargradient()方法，绘制出了一个线性渐变色。
图6 图片上添加文字
示例代码如下：
@entry@componentstruct gradientexample { private settings: renderingcontextsettings = new renderingcontextsettings(true); private context: renderingcontext = new renderingcontext(this.settings); private gra: canvasgradient = new canvasgradient(); build() { column({ space: 5 }) {//创建一个画布 canvas(this.context) .width(1500) .height(900) .backgroundcolor('#ffff00 ') column() {//设置按钮的样式 button('click').width(250).height(100).backgroundcolor('#000000') .onclick(() => {//创建一个线性渐变色 var grad = this.context.createlineargradient(600, 200, 400, 750) grad.addcolorstop(0.0, 'red'); grad.addcolorstop(0.5, 'white'); grad.addcolorstop(1.0, 'green'); this.context.fillstyle = grad; this.context.fillrect(400, 200, 550, 550); }) }.alignitems(horizontalalign.center) } } } 三、飞机大战小游戏绘制实践
如图7所示，是一款“飞机大战”小游戏，通过控制战机的移动摧毁敌机。如何使用arkui开发框架提供的canvas组件轻松实现这个经典怀旧的小游戏?实现思路及关键代码如下：
1. 首先列出游戏所用到的图片。
private imglist:array = [xx.png,xx.png…]; 2. 将图片渲染到canvas画布上。
let img:imagebitmap = new imagebitmap(图片路径（如common/images）/+this.imglist[数组下标]);this.ctx.drawimage( img,150/* x坐标*/, 150/* y坐标*/, 600/*宽*/, 600/*高*/) 3. 绘制背景图片和战机向下移动的效果。
this.ctx.drawimage(this.bg, 0, this.bgy);this.ctx.drawimage(this.bg, 0, this.bgy - 480);this.bgy++ == 480 && (this.bgy = 0); 4. 使用math.round函数随机获取敌机图片并渲染到画布上。并且改变敌机y轴坐标，使它向下运动。
efight = math.round(math.random()*7);//前七张为敌机图片。let img:imagebitmap = new imagebitmap(common/img+this.imglist[efight]);this.ctx.drawimage(img, 0, this.eheight + 50);//渲染敌机 5. 在页面每隔120s出现一排子弹，之后减小或增大(x,y)轴的坐标达到子弹射出效果。
let i= 0;setinterval(()=>{ this.ctx.drawimage(this.bulimg1,image.x – 10 – (i *10) , image.x + (i *10)) this.ctx.drawimage(this.bulimg2, this. bulimg1,image.x – (i *10) , i image.x + (i *10)) this.ctx.drawimage(this.bulimg3, image.x + 10 + (i *10), image.x + (i *10))i ++;},120) 6.使用ontouch方法获取战机移动位置，获取拖动的坐标后重新设置战机的图片坐标，使战机实现拖动效果。
.ontouch((event)=>{ var offsetx = event.localx ||event.touches[0].localx; var offsety = event.localy ||event.touches[0].localy; var w = this.heroimg[0].width, h = this.heroimg[0].height; var nx = offsetx - w / 2, ny = offsety - h / 2; nx (this.windowwidth - w / 2 - 20) ? nx = (this.windowwidth - w / 2 - 20) : 0; ny (this.windowheight - h / 2) ? ny = (this.windowheight – h/2) : 0; this.hero.x = nx; this.hero.y = ny; this.hero.count = 2; 以上就是本期全部内容，期待广大开发者能通过canvas组件绘制出精美的图形。更多canvas组件的详细使用方法，跳转到官网文档进行学习。
原文标题：canvas绘制“飞机大战”小游戏，真香!
文章出处：【微信公众号：harmonyos开发者】欢迎添加关注!文章转载请注明出处。
苹果造车的关键在软件和电池
元宇宙什么意思，联想超前布局工业元宇宙
iPhone12 Pro Max前置镜头测试结果公布
德赛西威一次性成功通过Automotive SPICE CL2过程和能力评估
关于PCB安全间距设计的探讨
canvas基础绘制方法介绍
酸性氯化铜蚀刻液和碱性氯化铜蚀刻液
医疗是否可以因为云计算将业务迁移到云上去
虚拟现实系统的关键技术
什么是防孤岛保护 防孤岛保护案例分析
圣邦微电子双电池方案可以满足数码产品长待机要求
拍照式虫情测报有哪些作用
诺基亚将于2022年底在月球表面上部署首个LTE/4G网络
如何对车载电子产品进行电压瞬变测试
“农业物联网”不仅是农业生产的得力助手，更是生态农业的护卫军
亚马逊正在裁掉一些从事其内部无人机交付项目的人员
什么是电磁制动电动机？
锂离子充电电池地位稳定，仍需改革前进
英特尔：SK海力士收购闪存业务有助于其解决芯片技术困境
小米6终极曝光，它可以收复多少米5丢失的尊严？
一、canvas介绍
1. 什么是canvas?
在web浏览器中，canvas是一个可自定义width、height的矩形画布，画布左上角为坐标原点，以像素为单位，水平向右为x轴，垂直向下为y轴，画布内所有元素的位置基于原点进行定位。如图1所示，我们通过标签，创建了一个width=1500px，height=900px的空白画布，我们还需要“画笔”才能绘制图形。canvas采用轻量的逐像素渲染机制，以js为“画笔”直接控制画布像素，从而实现图形绘制。
图1 canvas画布
2. canvas的“画笔”
canvas本身虽不具备绘制能力，但是提供了获取“画笔”的方法。开发者可通过getcontext('2d')方法获取canvasrenderingcontext2d对象完成2d图像绘制，或通过getcontext('webgl')方法获取webglrenderingcontext对象完成3d图像绘制。
目前，arkui开发框架中的webgl1.0及webgl2.0标准3d图形绘制能力正在完善中，所以本文将着重介绍2d图像的绘制。如图2所示，是canvasrenderingcontext2d对象提供的部分2d图像绘制方法，丰富的绘制方法让开发者能高效的绘制出矩形、文本、图片等。
图2 图像绘制方法
另外，开发者还可以获取offscreencanvasrenderingcontext2d对象进行离屏绘制，绘制方法同上。当绘制的图形比较复杂时，频繁的删除与重绘会消耗很多性能。开发者可根据自身的需求灵活选取canvas的渲染方式。这时，开发者可以根据自身的需求灵活选取离屏渲染的方式，通过创建offscreencanvas对象作为一个缓冲区，然后将需要绘制的内容先绘制在offscreencanvas上，最后再将offscreencanvas绘制到主画布上，以提高画布性能，确保绘图的质量。
二、canvas基础绘制方法
通过上节对canvas组件的基本介绍，相信大家对canvas组件已经有了一定的认识，下面我们将为大家实际演示canvas组件在arkui开发框架中的使用方法。arkui开发框架参考web浏览器中canvas的设计，并在“类web开发范式”及“声明式开发范式”两种开发范式中进行提供，接下来我们将分别介绍这两种开发范式中canvas的使用。
1. 类web开发范式中canvas的绘制方法
类web开发范式，使用hml标签文件进行布局搭建、css文件进行样式描述，并通过js语言进行逻辑处理。目前，js语言的canvas绘图功能已经基本上完善，下面我们将通过两个示例，展示基于js语言的canvas组件基础使用方法。
(1)矩形填充
canvasrenderingcontext2d对象提供了fillrect(x, y, width,height)方法，用于绘制一个填充的矩形。如图3所示，在画布内绘制了一个黑色的填充矩形，x与y指定了在canvas画布上所绘制的矩形的左上角(相对于原点)的坐标，width和height则设置了矩形的尺寸。
图3 填充的矩形
示例代码如下：
//创建一个width=1500px，height=900px的画布 canvas>div>
//xxx.jsexport default { onshow() { const el =this.$refs.canvas; //获取2d绘制对象 const ctx = el.getcontext('2d'); //设置填充为黑色 ctx.fillstyle = '#000000'; //设置填充矩形的坐标及尺寸 ctx.fillrect(200, 200, 300, 300); }} (2)缩放与阴影
canvasrenderingcontext2d对象提供了scale(x,y)方法，参数x表示横轴方向上缩放倍数，y表示纵轴方向上缩放的倍数，值得注意的是缩放过程中定位也会被缩放。如图4所示，是将上个示例中的填充矩形通过 scale(2,1.5)进行缩放，并通过shadowblur方法加上阴影后的效果。
图4 缩放与添加阴影后的效果
示例代码如下：
//xxx.jsexport default { onshow() { const el =this.$refs.canvas; const ctx = el.getcontext('2d'); //设置绘制阴影的模糊级别 ctx.shadowblur = 80; ctx.shadowcolor = 'rgb(0,0,0)'; ctx.fillstyle = 'rgb(0,0,0)'; // x scale to 200%,y scale to 150% ctx.scale(2, 1.5); ctx.fillrect(200, 200, 300, 300); }} 2. 声明式开发范式中canvas的绘制方法
声明式开发范式，采用ts语言并进行声明式ui语法扩展，从组件、动效和状态管理三个维度提供了ui绘制能力。目前，ets语言已经提供了canvas组件绘制能力，但功能仍在完善中。下面我们将通过两个示例，展示声明式开发范式中canvas组件的基础使用方法。
(1)图片叠加
如图5所示，是三张图片叠加的效果，顶层的图片覆盖了底层的图片。通过依次使用drawimage(x,y, width, height)方法设置图片坐标及尺寸，后面绘制的图片自动覆盖原来的图像，从而达到预期效果。
图5 图片叠加
扩展的ts语言采用更接近自然语义的编程方式，让开发者可以直观地描述ui界面，示例代码如下：
@entry@componentstruct indexcanvas1 { private settings:renderingcontextsettings = new renderingcontextsettings(true);//获取绘图对象 private ctx: renderingcontext = new renderingcontext(this.settings);//列出所要用到的图片 private img:imagebitmap = new imagebitmap(common/bg.jpg); build() { column() { //创建canvas canvas(this.ctx) .width(1500) .height(900) .border({color:blue,width:1,}) .backgroundcolor('#ffff00') //开始绘制 .onready(() => { this.ctx.drawimage( this.img,400,200,540,300); this.ctx.drawimage( this.img,500,300,540,300); this.ctx.drawimage( this.img,600,400,540,300); }) } .width('100%') .height('100%') }} (2)点击创建线性渐变
如图6所示，在画布中是一个线性渐变效果。本示例基于canvas扩展了一个button组件，通过点击“click”按钮，触发onclick()方法，并通过调用createlineargradient()方法，绘制出了一个线性渐变色。
图6 图片上添加文字
示例代码如下：
@entry@componentstruct gradientexample { private settings: renderingcontextsettings = new renderingcontextsettings(true); private context: renderingcontext = new renderingcontext(this.settings); private gra: canvasgradient = new canvasgradient(); build() { column({ space: 5 }) {//创建一个画布 canvas(this.context) .width(1500) .height(900) .backgroundcolor('#ffff00 ') column() {//设置按钮的样式 button('click').width(250).height(100).backgroundcolor('#000000') .onclick(() => {//创建一个线性渐变色 var grad = this.context.createlineargradient(600, 200, 400, 750) grad.addcolorstop(0.0, 'red'); grad.addcolorstop(0.5, 'white'); grad.addcolorstop(1.0, 'green'); this.context.fillstyle = grad; this.context.fillrect(400, 200, 550, 550); }) }.alignitems(horizontalalign.center) } } } 三、飞机大战小游戏绘制实践
如图7所示，是一款“飞机大战”小游戏，通过控制战机的移动摧毁敌机。如何使用arkui开发框架提供的canvas组件轻松实现这个经典怀旧的小游戏?实现思路及关键代码如下：
1. 首先列出游戏所用到的图片。
private imglist:array = [xx.png,xx.png…]; 2. 将图片渲染到canvas画布上。
let img:imagebitmap = new imagebitmap(图片路径（如common/images）/+this.imglist[数组下标]);this.ctx.drawimage( img,150/* x坐标*/, 150/* y坐标*/, 600/*宽*/, 600/*高*/) 3. 绘制背景图片和战机向下移动的效果。
this.ctx.drawimage(this.bg, 0, this.bgy);this.ctx.drawimage(this.bg, 0, this.bgy - 480);this.bgy++ == 480 && (this.bgy = 0); 4. 使用math.round函数随机获取敌机图片并渲染到画布上。并且改变敌机y轴坐标，使它向下运动。
efight = math.round(math.random()*7);//前七张为敌机图片。let img:imagebitmap = new imagebitmap(common/img+this.imglist[efight]);this.ctx.drawimage(img, 0, this.eheight + 50);//渲染敌机 5. 在页面每隔120s出现一排子弹，之后减小或增大(x,y)轴的坐标达到子弹射出效果。
let i= 0;setinterval(()=>{ this.ctx.drawimage(this.bulimg1,image.x – 10 – (i *10) , image.x + (i *10)) this.ctx.drawimage(this.bulimg2, this. bulimg1,image.x – (i *10) , i image.x + (i *10)) this.ctx.drawimage(this.bulimg3, image.x + 10 + (i *10), image.x + (i *10))i ++;},120) 6.使用ontouch方法获取战机移动位置，获取拖动的坐标后重新设置战机的图片坐标，使战机实现拖动效果。
.ontouch((event)=>{ var offsetx = event.localx ||event.touches[0].localx; var offsety = event.localy ||event.touches[0].localy; var w = this.heroimg[0].width, h = this.heroimg[0].height; var nx = offsetx - w / 2, ny = offsety - h / 2; nx (this.windowwidth - w / 2 - 20) ? nx = (this.windowwidth - w / 2 - 20) : 0; ny (this.windowheight - h / 2) ? ny = (this.windowheight – h/2) : 0; this.hero.x = nx; this.hero.y = ny; this.hero.count = 2; 以上就是本期全部内容，期待广大开发者能通过canvas组件绘制出精美的图形。更多canvas组件的详细使用方法，跳转到官网文档进行学习。
原文标题：canvas绘制“飞机大战”小游戏，真香!
文章出处：【微信公众号：harmonyos开发者】欢迎添加关注!文章转载请注明出处。
苹果造车的关键在软件和电池
元宇宙什么意思，联想超前布局工业元宇宙
iPhone12 Pro Max前置镜头测试结果公布
德赛西威一次性成功通过Automotive SPICE CL2过程和能力评估
关于PCB安全间距设计的探讨
canvas基础绘制方法介绍
酸性氯化铜蚀刻液和碱性氯化铜蚀刻液
医疗是否可以因为云计算将业务迁移到云上去
虚拟现实系统的关键技术
什么是防孤岛保护 防孤岛保护案例分析
圣邦微电子双电池方案可以满足数码产品长待机要求
拍照式虫情测报有哪些作用
诺基亚将于2022年底在月球表面上部署首个LTE/4G网络
如何对车载电子产品进行电压瞬变测试
“农业物联网”不仅是农业生产的得力助手，更是生态农业的护卫军
亚马逊正在裁掉一些从事其内部无人机交付项目的人员
什么是电磁制动电动机？
锂离子充电电池地位稳定，仍需改革前进
英特尔：SK海力士收购闪存业务有助于其解决芯片技术困境
小米6终极曝光，它可以收复多少米5丢失的尊严？