概述
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).效果
相关推荐：
js与canvas合成图片做出微信公众号海报功能
怎样用canvas来绘制弧线和圆
用H5的canvas做出弹幕效果
以上就是微信小程序canvas基础详解的详细内容，更多请关注靠谱客其它相关文章！
最后
以上就是淡定魔镜为你收集整理的微信小程序canvas基础详解的全部内容，希望文章能够帮你解决微信小程序canvas基础详解所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复