微信小程序中的canvas

canvas 常用属性：

canvas基本用法：

创建canvas.wxml文件。

<canvas canvas-id="myCanvas"></canvas>	

canvas组件默认样式如下。

canvas {
   width: 300px;
   height: 150px;
   display: block;
   position: relative;
}

canvas组件默认效果图：

注意：

canvas组件是原生组件，它的层级是最高的，不能通过z-index设置层级，css动画对canvas组件无效。

canvas绘制基本步骤：

第1步：创建Canvas绘图上下文对象CanvasContext

const ctx =  wx.createCanvasContext('myCanvas')

第2步：使用Canvas绘图上下文进行绘图描述

ctx.setFillStyle('red') 	     // 设置填充色为红色
// 画一个矩形，填充为红色
ctx.fillRect(10, 20, 150, 75)     // ctx.fillRect(x, y, width, height)

第3步：画图

ctx.draw()

效果图

canvas绘制笑脸：

代码如下：

// 创建Canvas绘图上下文对象CanvasContext
const ctx =  wx.createCanvasContext('myCanvas')
// 设置线条颜色和线宽
ctx.setStrokeStyle('#ff0000')
ctx.setLineWidth(2)
// 移动画笔坐标位置，绘制（外部大圆）
ctx.moveTo(160, 100)
ctx.arc(100, 100, 60, 0, 2 * Math.PI, true)
// 移动画笔坐标位置，绘制（嘴巴线条）
ctx.moveTo(140, 100)
ctx.arc(100, 100, 40, 0, Math.PI, false)
移动画笔坐标位置，绘制（左 右眼圆圈）
ctx.moveTo(85, 80)
ctx.arc(80, 80, 5, 0, 2 * Math.PI, true)
ctx.moveTo(125, 80)
ctx.arc(120, 80, 5, 0, 2 * Math.PI, true)
// 画出当前路径的边框
ctx.stroke()

wx.draw ()

ok 画完了，来领取你的专属笑脸 O(∩_∩)O

canvas对象方法介绍：

CanvasContext.draw ()：将之前在绘图上下文中的描述（路径、样式、变形）画到canvas中。
CanvasContext.arc()：创建一条弧线。
CanvasContext.rect()：创建一个矩形路径。
CanvasContext.lineTo()：新增一个新点，用stroke方法来画线条。
CanvasContext.moveTo()：把路径移动到画布中的指定点，不创建线条。