重庆小潘seo博客

当前位置:首页 > 重庆网络营销 > 小潘杂谈 >

小潘杂谈

微信小程序canvas基础详解

时间:2020-09-13 09:30:07 作者:重庆seo小潘 来源:
canvas 元素用于在网页上绘制图形。HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像。本文主要和大家分享微信小程序canvas基础详解,希望能帮助到大家。 一.了解canvas canvas 标签默认宽度300px、高度225px。同一页面中的 canvas-id 不可重复,如

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

一.了解canvas

微信小程序canvas基础详解

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

需要指定 canvasId,该绘图上下文只作用于对应的 <canvas/><!--canvas.wxml--><view>微信小程序canvas基础详解

二.在canvas中绘制图形

(1).步骤

wxml中:<canvas canvas-id="myCanvas" class="myCanvas" ></canvas>1.创建一个 Canvas 绘图上

下文 CanvasContextconst 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基础详解

相关推荐:

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

怎样用canvas来绘制弧线和圆

用H5的canvas做出弹幕效果以上就是微信小程序canvas基础详解的详细内容,更多请关注小潘博客其它相关文章!