OpenHarmony 3.1 Beta 版本关键特性解析——ArkUI canvas组件 原创 精华

//创建一个width=1500px，height=900px的画布
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 1500px; height: 900px; "></canvas>
</div>
1.
2.
3.
4.
5.

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
//获取2D绘制对象
    const ctx = el.getContext('2d');
//设置填充为黑色
    ctx.fillStyle = '#000000';
//设置填充矩形的坐标及尺寸
    ctx.fillRect(200, 200, 300, 300);
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

//xxx.js
export 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);
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

@Entry
@Component
struct 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%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

@Entry
@Component
struct 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)
     }
   }
 }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

private imgList:Array<string> = ["xx.png","xx.png"…];
1.

let img:ImageBitmap = new ImageBitmap("图片路径（如common/images）/"+this.imgList[数组下标]);
this.ctx.drawImage( img,150/* x坐标*/,  150/* y坐标*/, 600/*宽*/, 600/*高*/)
1.
2.

this.ctx.drawImage(this.bg, 0, this.bgY);
this.ctx.drawImage(this.bg, 0, this.bgY - 480);
this.bgY++ == 480 && (this.bgY = 0);
1.
2.
3.

Efight = Math.round(Math.random()*7);
//前七张为敌机图片。
let img:ImageBitmap = new ImageBitmap("common/img"+this.imgList[Efight]);
this.ctx.drawImage(img, 0, this.Eheight + 50);//渲染敌机
1.
2.
3.
4.

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)
1.
2.
3.
4.
5.
6.
7.

.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 < 20 - w / 2 ? nx = 20 - w / 2 : nx > (this.windowWidth - w / 2 - 20) ? nx =
  (this.windowWidth - w / 2 - 20) : 0;
  ny < 0 ? ny = 0 : ny > (this.windowHeight - h / 2) ? ny = (this.windowHeight –
  h/2) : 0;
     this.hero.x = nx;
     this.hero.y = ny;
     this.hero.count = 2;
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.