微信小程序中canvas有什么用

这篇文章给大家分享的是有关微信小程序中canvas有什么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

canvas 元素用于在网页上绘制图形。HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像。本文主要和大家分享微信小程序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" 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).效果

感谢各位的阅读！关于“微信小程序中canvas有什么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！