微信小程序canvas基础详解

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

一.了解canvas

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

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

 !--canvas.wxml-- 
 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( #39;myCanvas #39;)
2.们来描述要在 Canvas 中绘制什么内容
ctx.setFillStyle( #39;red #39;)
ctx.fillRect(10, 10, 150, 75)
3.绘制
ctx.draw()
(2).代码
//canvas.js 
//获取应用实例 
var app = getApp() 
Page({
 onLoad: function() {
 const ctx = wx.createCanvasContext( #39;myCanvas #39;);
 ctx.setFillStyle( #39;red #39;);
 ctx.fillRect(10, 10, 150, 75);
 ctx.draw();
})
(3).效果


相关推荐：
js与canvas合成图片做出微信公众号海报功能
怎样用canvas来绘制弧线和圆
用H5的canvas做出弹幕效果
以上就是微信小程序canvas基础详解的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！