其他分享
首页 > 其他分享> > 微信小游戏

微信小游戏

作者:互联网

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