一.了解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).效果
相关推荐:
原文地址:https://www.jb51.cc/weapp/1202484.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。