2.1.2 缩放与阴影
CanvasRenderingContext2D 对象提供了 scale (x,y) 方法 ， 参数 x 表示横轴方向上缩放倍数 ， y 表示纵轴方向上缩放的倍数 ， 值得注意的是缩放过程中定位也会被缩放 。 如下图所示 ， 是将上个示例中的填充矩形通过 scale (2,1.5) 缩放 ， 并通过 shadowBlur 方法加上阴影后的效果 。

文章图片

示例代码如下：
//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.2 声明式开发范式中 canvas 的绘制方法
声明式开发范式 ， 采用 TS 语言并进行声明式 UI 语法扩展 ， 从组件、动效和状态管理三个维度提供了 UI 绘制能力 ， 目前已经提供了 canvas 组件绘制能力 ， 但功能仍在完善中 。 下面我们将通过两个示例展示声明式开发范式中 canvas 组件的基础使用方法 。
2.2.1 图片叠加
如下图所示 ， 是三张图片叠加的效果 ， 顶层的图片覆盖了底层的图片 。 通过依次使用 drawImage (x,y, width, height) 方法设置图片坐标及尺寸 ， 后面绘制的图片自动覆盖原来的图像 ， 从而达到预期效果 。

文章图片

【开源鸿蒙 OpenHarmony 3.1画布解析，教你如何完成飞机大战小游戏】扩展的 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.2.2 点击创建线性渐变
如下图所示 ， 是一个线性渐变效果 。 基于 canvas 扩展了一个 Button 组件 ， 通过点击“Click”按钮 ， 触发 onClick 方法 ， 并通过调用 createLinearGradient 方法 ， 绘制出了一个线性渐变色 。

文章图片

示例代码如下：
@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) } } }飞机大战小游戏绘制实践
如下图所示 ， 是一款”飞机大战”小游戏 ， 通过控制战机的移动摧毁敌机 。 如何使用 ArkUI 开发框架提供的 canvas 组件轻松实现这个经典怀旧的小游戏？实现思路及关键代码如下：