微信小程序开发—(七)canvas基础

一.了解canvas      canvas 标签默认宽度300px、高度225px。      同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作。需要指定 canvasId，该绘图上下文只作用于对应的 

<canvas/>

<!--canvas.wxml--><view class="container"><canvas canvas-id="myCanvas" class="myCanvas" ></canvas></view>

/**canvas.wxss*/.myCanvas{border: 1px solid #ccc;width:100%;height:250px;}

二.在canvas中绘制图形(1).步骤wxml中：<canvas canvas-id="myCanvas" class="myCanvas" ></canvas>1.创建一个 Canvas 绘图上下文 CanvasContext

const ctx = wx.createCanvasContext('myCanvas')

2.们来描述要在 Canvas 中绘制什么内容

ctx.setFillStyle('red')

ctx.fillRect(10, 10, 150, 75)

3.绘制

ctx.draw()

(2).代码

//canvas.js//获取应用实例var app = getApp()Page({onLoad: function() {const ctx = wx.createCanvasContext('myCanvas');ctx.setFillStyle('red');ctx.fillRect(10, 10, 150, 75);ctx.draw();}})

(3).效果