微信小程序canvas基础详解

一.了解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" clas  s="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).效果

相关推荐：

js与canvas合成图片做出微信公众号海报功能

怎样用canvas来绘制弧线和圆

用H5的canvas做出弹幕效果

以上就是微信小程序canvas基础详解的详细内容，更多内容请关注技术你好其它相关文章！