微信小游戏

js中三种定义变量的方式const， var， let的区别:

1.const定义的变量不可以修改，而且必须初始化。

2.var定义的变量可以修改，如果不初始化会输出undefined，不会报错。

3.let是块级作用域，函数内部使用let定义后，对函数外部无影响。

定义和用法

getContext() 方法返回一个用于在画布上绘图的环境。

参数

参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。

提示：在未来，如果 <canvas> 标签扩展到支持 3D 绘图，getContext() 方法可能允许传递一个 "3d" 字符串参数。

返回值

一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中。

描述

返回一个表示用来绘制的环境类型的环境。其本意是要为不同的绘制类型（2 维、3 维）提供不同的环境。当前，唯一支持的是 "2d"，它返回一个 CanvasRenderingContext2D 对象，该对象实现了一个画布所使用的大多数方法。

context.fillRect(x,y,width,height);

const canvas = wx.createCanvas()  //创建一个画布
const context = canvas.getContext(‘2d‘) // 创建一个 2d 不能改3d context
context.fillStyle = ‘#FF1493‘ // 矩形颜色
context.fillRect(30,30,100,100) // 矩形左上角顶点为(30, 30)，右下角顶点为(100, 100)
context.fillRect(canvas.width / 2 - 50, 0, 100, 100)  横向居中

const { windowWidth, windowHeight } = wx.getSystemInfoSync()  自动获取屏幕的宽和高
function drawRect(x, y) {
  context.clearRect(0, 0, windowWidth, windowHeight)清画幕
  context.fillRect(x, y, 100, 100) 位置处理
} //函数
drawRect(canvas.width / 2 - 50, 100) //调用函数

setInterval(code,millisec[,"lang"])

const rectX = canvas.width / 2 - 50
let rectY = 0
setInterval(function(){
  drawRect(rectX, rectY++)
}, 16)//这里我们添加了一个每 16ms 执行一次的定时器函数，并且每次绘制都使矩形左上角 y 坐标在原有基础上增加 1，添加上述代码后保存，可以看到模拟器上出现一个自上而下下落的绿色矩形