资讯详情前言
这段时间闲下来，系统学习了微信小程序和微信小游戏，发现还是挺有意思的。现在微信小游戏的开发都离不开游戏引擎，用原生小游戏开发工具开发的很少很少。但是毕竟我不是专业游戏开发，所有游戏引擎就不搞了，我们就单纯来看原生微信小游戏开发。
原生微信小游戏开发全是js，界面上所有的可见元素都是通过js canvas画出来的。所以这就是这篇博客的内容，我们要来整理下微信小游戏Canvas的绘图api。为什么要单独写篇博客整理呢，因为微信小游戏的官方文档并没有提供(反正我是没有找到)。因为微信小游戏的canvas绘制和H5的canvas绘制基本没有却别，这本身是属于H5的范畴，并不是微信小游戏的范畴，所以，废话说了这么多，下面开始正文。
(1)获取canvas
要使用canvas绘制，首先得获取到canvas实例，在H5中获取canvas和获取其它标签一样，通过document获取。
var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");
但是微信小程序做了封装，它不允许用户直接操作dom，所以不能通过document获取canvas，而是提供了一个微信api。
let canvas =wx.createCanvas();let ctx = canvas.getContext('2d');
(2)填充色和线条色
填充色：线条封闭区域内全部着色
var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");ctx.fillStyle = "#0000ff";ctx.fillRect(20, 20, 150, 100);
线条色：只给线条着色，着色宽度就是线条宽度
var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");ctx.strokeStyle = "#0000ff";ctx.strokeRect(20, 20, 150, 100);
(3)阴影
阴影颜色：阴影的本质就是光线被挡而形成的暗淡，所以建议不要给阴影设置很鲜艳的颜色
var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");ctx.shadowColor = "black";ctx.fillStyle = "blue";ctx.fillRect(20, 20, 100, 80);
阴影大小：所谓阴影大小就是阴影扩散的范围
var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");ctx.shadowBlur = 20;ctx.shadowColor = "black";ctx.fillStyle = "blue";ctx.fillRect(20, 20, 100, 80);
阴影偏移：光源的方位决定的阴影投射的方向
var canvas = document.getElementById("myCanvas");var ctx = canvas .getContext("2d");ctx.shadowOffsetX = 20;ctx.fillStyle = "blue";ctx.fillRect(20, 20, 100, 80);
var canvas = document.getElementById("myCanvas");var ctx = canvas .getContext("2d");ctx.shadowOffsetY = 20;ctx.fillStyle = "blue";ctx.fillRect(20, 20, 100, 80);
(4)渐变
渐变就要涉及到渐变颜色和渐变方向，H5中渐变方向是通过起始点决定的，在createLinearGradient方法中传入两个点的坐标，这两个点的连线方向就是渐变的方向。设置渐变颜色是通过addColorStop方法添加。
var canvas = document.getElementById("myCanvas");var ctx = canva.getContext("2d");var my_gradient = ctx.createLinearGradient(0, 0, 0, 170);my_gradient.addColorStop(0, "black");my_gradient.addColorStop(1, "white");ctx.fillStyle = my_gradient;ctx.fillRect(20, 20, 150, 100);
我们尝试一下从做到右的渐变
var canvas = document.getElementById("myCanvas");var ctx = canva.getContext("2d");var my_gradient = ctx.createLinearGradient(0, 0, 170, 0);my_gradient.addColorStop(0, "black");my_gradient.addColorStop(1, "white");ctx.fillStyle = my_gradient;ctx.fillRect(20, 20, 150, 100);
渐变色可以添加多个，我们尝试添加三个渐变色：黑 -> 红 -> 白
var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var my_gradient = ctx.createLinearGradient(0, 0, 170, 0);my_gradient.addColorStop(0, "black");my_gradient.addColorStop(0.5, "red");my_gradient.addColorStop(1, "white");ctx.fillStyle = my_gradient;ctx.fillRect(20,20,150,100);
当然也可以给线条设置渐变
var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var gradient = ctx.createLinearGradient(0, 0, 170, 0);gradient.addColorStop("0", "magenta");gradient.addColorStop("0.5", "blue");gradient.addColorStop("1.0", "red");ctx.strokeStyle = gradient;ctx.lineWidth = 5;ctx.strokeRect(20, 20, 150, 100);
甚至可以给文字设置渐变
var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var gradient = ctx.createLinearGradient(0, 0, 170, 0);gradient.addColorStop("0", "magenta");gradient.addColorStop("0.5", "blue");gradient.addColorStop("1.0", "red");ctx.strokeStyle = gradient;ctx.strokeText("Big smile!", 10, 50);
(5)元素重复
createPattern() 方法在指定的方向内重复指定的元素。元素可以是图片、视频，或者其他元素。被重复的元素可用于绘制/填充矩形、圆形或线条等等。
重复模式：repeat、repeat-x、repeat-y、no-repeat
var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");ctx.clearRect(0, 0, 300, 150); var img = document.getElementById("img")var pat = ctx.createPattern(img, "repeat");ctx.rect(0, 0, 260, 130);ctx.fillStyle = pat;ctx.fill();
(6)放射渐变
没有和渐变放在一起，主要是函数不一样
var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);grd.addColorStop(0, "red");grd.addColorStop(1, "white");ctx.fillStyle = grd;ctx.fill
