微信小游戏canvas使用教程

一、创建Canvas

var canvas = wx.createCanvas();

二、在Canvas上进行绘制

1、绘制矩形

var context = canvas.getContext(‘2d’); context.fillStyle = ‘red’; context.fillRect(0,0,100,100);

2、绘制图片

var image = wx.createImage(); image.onload = function () { console.log(image.width, image.height); context.drawImage(image, 0, 0); } image.src = 'images/0.jpg';

3、绘制横线

context.strokeStyle = "red"; context.moveTo(15 , 15); context.lineTo(300 , 15); context.stroke();

4、绘制竖线

context.strokeStyle = "red"; context.moveTo(15 , 15);//垂直方向画15根线，相距30px; context.lineTo(15 , 300); context.stroke();