微信小游戏

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)  横向居中

wx.getSystemInfoSync()   获取windows 的宽和高

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() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

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

参数	描述
code	必需。要调用的函数或要执行的代码串。
millisec	必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

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

直接调用canvas的 drawImage()方法首次加载时图片不显示，解决方案是在Img.onload（）方法中绘制图。但是如果以后需要不断的绘制该图片的时候就会一直调用onload事件，出现图片一闪一闪的现象，解决方案是根据Img.complete（）方法判断图片是否加载完成。

标签：canvas,const,微信,小游戏,context,fillRect,100,绘制
来源： https://www.cnblogs.com/qj696/p/12875519.html