微信小程序canvas基础详解

百变鹏仔 6天前 #前端问答

文章标签详解

canvas 元素用于在网页上绘制图形。HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像。本文主要和大家分享微信小程序canvas基础详解，希望能帮助到大家。

一.了解canvas

canvas 标签默认宽度300px、高度225px。
同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作。

需要指定 canvasId，该绘图上下文只作用于对应的

<!--canvas.wxml--><view><canvas></canvas></view>

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

二.在canvas中绘制图形

(1).步骤

wxml中：

<canvas 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基础详解

揭秘：魏则西离去真正的原因（派代网）

拒绝做微商被屏蔽拉黑，方法我有！（派代网）

【派代&amp;生意参谋电商论剑征文大赛】重磅！不看江湖地位，只论技法高下，等你来战！（）

寻洲：微商警戒线，你知道几个？

拒绝做微商被屏蔽拉黑，方法我有！（）

【派代&生意参谋电商论剑征文大赛】重磅！不看江湖地位，只论技法高下，等你来战！（）