微信小游戏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();