探索小程序2D绘图：从直线开始

画布。2.9.0 起支持一套新 Canvas 2D 接口（需指定 type 属性），同时支持同层渲染，原有接口不再维护。

小程序开发绘图类的应用都是基于Canvas进行的，对于已有的H5上的canvas应用，要迁移到小程序上，往往需要调用小程序提供的API进行，2.9.0以后就开始支持HTML5 Canvas的API，也就是可以将HTML5 Canvas上的代码迁移到小程序上

接下来通过直线绘制的例子，来看看小程序上如何使用2D API进行绘制，同时对比HTML5下Canvas的API

创建Canvas标签

HTML5代码清单

<canvas id="myCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>

• 通过width和height属性，定义画布的大小也是绘图的区域，这个绘制区域不能使用CSS的方式绘制
• 指定ID属性，用于获取画布的对象和绘制图形的上下文
• 使用style设置一个边框样式，便于观察

小程序代码清单

<canvas type="2d" id="myCanvas" style="border:2rpx solid #000; width:750rpx;height:600rpx;"></canvas>

• type属性，指定画布采用新的2D API来绘制图形，因此原有提供Canvas的绘制接口在该模式下是不生效的
• style属性，指定画布的宽高，小程序中没有width和height的属性，只能通过style属性设置，这个属性只是画布显示的尺寸，而不是画布绘制区域的尺寸

绘制直线

Canvas标签对象本身不提供任何绘制功能，需要获取绘制上下文对象，它提供一套API来实现图形的绘制

• 基本图形（矩形，三角形，多边形等等）的绘制
• 像素的操作
• 文字的绘制
• 边框样式，填充样式
• 图形的变换（缩小、放大、偏移、形状变换等等）

来看怎么绘制一条直线

JS代码

//获取画布对象
var myCanvas = document.getElementById('myCanvas');
//获取绘制上下文
var myContx = myCanvas.getContext('2d');
//移动画笔到指定为位置（即画布上的坐标）
myContx.moveTo(100, 100);
//移动画笔到指定为位置（即画布上的坐标）,并生成一个直线轨迹，也就是绘制路径，在画布上是看不到效果的
myContx.lineTo(200, 100);
//以描边的形式绘制轨迹
myContx.stroke();

小程序代码

let _this = this;
let dpr = wx.getSystemInfoSync().pixelRatio; //像素比
const query = wx.createSelectorQuery();
query.select('#myCanvas')
  .fields({ node: true, size: true })
  .exec((res) => {
    let canvasEl = res[0].node; //获取Canvas标签节点
    let canvasEl.width = res[0].width*dpr; //设置绘制区域的实际尺寸
    let canvasEl.height = res[0].height*dpr; //设置绘制区域的实际尺寸
    let ctx = canvasEl.getContext('2d'); //获取绘制上下文
    //移动画笔到指定为位置（即画布上的坐标）
    ctx.moveTo(100 , 100);
    //移动画笔到指定为位置（即画布上的坐标）,并生成一个直线轨迹，也就是绘制路径，在画布上是看不到效果的
    ctx.lineTo(200 , 100);
    //以描边的形式绘制轨迹
    ctx.stroke();
});

简单对比一下：

• HTML5是浏览器环境，使用DOM的方式操作节点（获取，查找，添加，删除）
• 小程序自有一套获取节点的方式，相对HTML5有所不同
• HTML5和小程序均可通过getContext('2d')获取2D的绘制上下文对象
• 绘制直线所调用的方法，HTML5和小程序的端基本是一样的

下一篇，研究下HTML5端和小程序在绘制矩形方面的异同

参考资料

小程序文档：组件>画布>canvas

小程序文档：API>canvas