小游戏绘制图形
上一章节中我们知道微信小游戏中 getContext('2d') 和 HTML Canvas 中的 getContext('2d') 返回的都是 CanvasRenderingContext2D
那么我们就可以使用下面的方法绘制一些图形
| 方法 | 说明 |
|---|---|
| fillRect() | 绘制并填充一个矩形 |
| strokeRect() | 绘制一个矩形 (只描绘边框) |
| fillText() | 绘制一个文本 |
| strokeText() | 只绘制文本的骨架 |
| moveTo(x,y) | 移动到某个点 |
| lineTo(x,y) | 绘制线条 |
还有很多方法，我们就不一一列出了，如果你有兴趣（ 必须的 ），可以访问我们的 HTML Canvas 基础教程
范例
我们来绘制一个绿色的 100x100 的小方形并且绘制一些文字
修改 game.js 为如下代码
game.js
var canvas = wx.createCanvas(); var ctx = canvas.getContext('2d'); ctx.fillStyle = "green"; ctx.fillRect(0, 0, 100, 100); ctx.strokeStyle = "blue"; ctx.strokeRect(0, 120, 100, 100); ctx.fillStyle = "orange" ctx.textAlign = "center" // 居中对齐 ctx.textBaseline = "middle" //垂直居中绘制 ctx.font = "32px Arial" // 字体大小 44 像素 ctx.fillText("www.twle.cn", canvas.width / 2, (canvas.height - 20)); ctx.strokeText("简单教程，简单编程", canvas.width / 2, (canvas.height - 75))
微信中预览如下
屏幕黑色
大家有么有发现，屏幕默认是黑色的，我还没时间去深入了解为什么，但我们可以使用下面的方式先填充成白色
ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvas.width, canvas.height);
演示如下
game.js
var canvas = wx.createCanvas(); var ctx = canvas.getContext('2d'); ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "green"; ctx.fillRect(0, 0, 100, 100); ctx.strokeStyle = "blue"; ctx.strokeRect(0, 120, 100, 100); ctx.fillStyle = "orange" ctx.textAlign = "center" // 居中对齐 ctx.textBaseline = "middle" //垂直居中绘制 ctx.font = "32px Arial" // 字体大小 44 像素 ctx.fillText("www.twle.cn", canvas.width / 2, (canvas.height - 20)); ctx.strokeText("简单教程，简单编程", canvas.width / 2, (canvas.height - 75))
预览如下
