00001-微信小游戏--显示图片

安装微信小程序和工具的操作就不再介绍了。
canvas 是一个画布,我们可以在上面绘制内容。所有绘制的内容需要使用一个屏幕坐标系,屏幕坐标系是以屏幕的左上角的点为0,0点。右方向为X轴正方向,下方向为Y轴正方向。
00001-微信小游戏--显示图片_第1张图片

在Canvas 上进行绘制

let ctx = canvas.getContext('2d')
export default class Main{
  constructor(){
	ctx.fillStyle = 'green';
	ctx.fillRect(0,300,100,100);
  }
}

通过 Canvas.getContext() 方法可以获取 2d 或 WebGL 渲染上下文 RenderingContext,调用渲染上下文的绘制方法可以在 Canvas 上进行绘制。小游戏基本上支持 2d 和 WebGL 1.0 所有的属性和方法,详情请见 RenderingContext。由于使用 WebGL 的绘制过程较为复杂,所以本文中的示例代码都以 2d 渲染上下文的绘制方法编写。
通过设置 width 和 height 属性可以改变 Canvas 对象的宽高,但这也会导致 Canvas 内容的清空和渲染上下文的重置。

canvas.width = 300
canvas.height = 300

00001-微信小游戏--显示图片_第2张图片

显示图片

			let image = wx.createImage();
				image.onload = function(){
				ctx.drawImage(image,0,0,53,33)
      		}
      		image.src = "images/Unity.jpg";

通过 wx.createImage() 接口,可以创建一个 Image 对象。Image 对象可以加载图片。当 Image 对象被绘制到 Canvas 上时,图片才会显示在屏幕上。

设置 Image 对象的 src 属性可以加载一张本地图片或网络图片,当图片加载完毕时会执行注册的 onload 回调函数,此时可以将 Image 对象绘制到 Canvas 上。

九宫格摆放

let ctx = canvas.getContext('2d')
export default class Main{
  constructor(){
	this.createImages();
  }

  createImages(){
    for (let i = 0; i < 3; i++) {//控制的是行数
		for (let j = 0; j < 3; j++) {//控制的是列数
			let image = wx.createImage();
				image.onload = function(){
				ctx.drawImage(image,j * (10+53),i*(10+33),53,33)
      		}
      		image.src = "images/Unity.jpg";
		}
    }
  }
}

00001-微信小游戏--显示图片_第3张图片

你可能感兴趣的:(微信小游戏)