这篇文章给大家分享的是有关微信小程序中canvas有什么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
专注于为中小企业提供网站建设、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业格尔木免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了1000+企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
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有什么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
网页标题:微信小程序中canvas有什么用
网站URL:https://www.cdcxhl.com/article40/pidieo.html
成都网站建设公司_创新互联,为您提供企业建站、电子商务、服务器托管、网站导航、手机网站建设、微信公众号
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联