探索小程序2D繪圖：從繪製直線開始

時間 2020-04-30

標籤探索程序 2d 繪圖繪製直線開始简体版

原文原文鏈接

畫布。2.9.0 起支持一套新 Canvas 2D 接口（需指定 type 屬性），同時支持同層渲染，原有接口再也不維護。javascript

小程序開發繪圖類的應用都是基於Canvas進行的，對於已有的H5上的canvas應用，要遷移到小程序上，每每須要調用小程序提供的API進行，2.9.0之後就開始支持HTML5 Canvas的API，也就是能夠將HTML5 Canvas上的代碼遷移到小程序上html

接下來經過直線繪製的例子，來看看小程序上如何使用2D API進行繪製，同時對比HTML5下Canvas的APIjava

建立Canvas標籤

HTML5代碼清單node

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

經過width和height屬性，定義畫布的大小也是繪圖的區域，這個繪製區域不能使用CSS的方式繪製
指定ID屬性，用於獲取畫布的對象和繪製圖形的上下文
使用style設置一個邊框樣式，便於觀察

小程序代碼清單web

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

type屬性，指定畫布採用新的2D API來繪製圖形，所以原有提供Canvas的繪製接口在該模式下是不生效的
style屬性，指定畫布的寬高，小程序中沒有width和height的屬性，只能經過style屬性設置，這個屬性只是畫布顯示的尺寸，而不是畫布繪製區域的尺寸

與以往的Canvas不一樣，一旦指定了type="2d/webgl"屬性，id屬性的名稱採用的是與HTML5同樣的屬性名，而不是原來的「canvas-id」canvas

繪製直線

Canvas標籤對象自己不提供任何繪製功能，須要獲取繪製上下文對象，它提供一套API來實現圖形的繪製小程序

基本圖形（矩形，三角形，多邊形等等）的繪製
像素的操做
文字的繪製
邊框樣式，填充樣式
圖形的變換（縮小、放大、偏移、形狀變換等等）

來看怎麼繪製一條直線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標籤節點
    canvasEl.width = res[0].width*dpr; //設置繪製區域的實際尺寸
    canvasEl.height = res[0].height*dpr; //設置繪製區域的實際尺寸
    let ctx = canvasEl.getContext('2d'); //獲取繪製上下文
    //移動畫筆到指定爲位置（即畫布上的座標）
    ctx.moveTo(100 , 100);
    //移動畫筆到指定爲位置（即畫布上的座標）,並生成一個直線軌跡，也就是繪製路徑，在畫布上是看不到效果的
    ctx.lineTo(200 , 100);
    //以描邊的形式繪製軌跡
    ctx.stroke();
});
複製代碼