精华

有关微信小程序的canvas开发

  • • 发表于 4个月前
  • • 作者 丁小柒
  • • 421 次浏览
  • • 17 条评论
  • • 最后编辑时间 4个月前
  • • 来自 [技术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

var author: “丁小柒”
注:我是第一次写这种文章,哪里不好的地方还请指出,我会改进的,希望可以给大家带来帮助
微信的小程序的canvas与js原生的canvas内容十分类似
页面的设置都是

<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>

设置canvas的样式与id
js部分则通过wx.createContext()的方法来创建画布的前后文,因为小程序目前只有2D,所以不需要来设置2d还是webGL

var con = wx.createContext();

接下来我们就可以进行绘制了,绘制的一般步骤是:

1.先定义绘制样式 setStrokeStyle=’’ ;或者是setFillStyle=’’;
con.setStrokeStyle("#00ff00");//描边风格 (stroke是绘制路径)
con.setFillStyle("#00ff00"); //填充风格
2.设置要绘制的信息,这部分文档里也有,不做详细讲解,只给添加上注释
con.setLineWidth(5);//设置线框的宽度
con.rect(0,0,200,200);//绘制矩形,内容分别为
(起点位置的横坐标 , 起点位置的纵坐标, 矩形的宽, 矩形的高)
context.arc(x,y,r,sAngle,eAngle,true);//绘制圆形

**x    圆的中心的 x 坐标。
  y    圆的中心的 y 坐标。
  r    圆的半径。**
 sAngle    起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。
  eAngle    结束角,以弧度计。 
 False = 顺时针,true = 逆时针。**

3.确定是路径绘制还是填充绘制
con.stroke(); con.fill();

这时我们会发现保存后界面上仍然什么都没有,这时,我们就需要调用微信的drawCanvas来将以上要绘制的图显示在canvas上
wx.drawCanvas({ canvasId: 'firstCanvas', actions: con.getActions() });
通过canvasId选择canvas的id来确定canvas,以防创建多张canvas时造成的绘制错误,
通过actions来获取绘图动作数组,然后我们就可以保存了,这时我们就可以看到效果了

Page({
         onReady: function (e) {
      var con = wx.createContext();
      这里进行绘制,大家都懂哈,上面也讲了的

        wx.drawCanvas({       //调用的wx.drawCanvas
       canvasId: 'firstCanvas',
       actions: con.getActions() 
      });
     }
    });

以下是我修改了实例上的代码的路径效果与填充效果
路径效果路径效果
填充效果填充效果

分享到:
评论区(共17条评论)
17条评论
Ctrl+Enter
作者

丁小柒

丁小柒

APP:0 帖子:24 回复:26 积分:1041

已加入社区[144]天

长剑非是封木鞘,挥手再斩万鬼雄

作者详情》
精品推荐课程更多
扫码入群
Top