用canvas画直线的小练习,希望给大家点启发

  • • 发表于 2年前
  • • 作者 梦醒时分
  • • 2267 次浏览
  • • 7 条评论
  • • 最后编辑时间 2年前
  • • 来自 [技 术]

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

本来今天想做登陆的,结果安全域名设置这个月用没了,只能下个月做喽,于是心血来潮玩了一下canvas终于有点门道了,暂且做个备忘,大家也给指点一下。本来今天想做登陆的,结果安全域名设置这个月用没了,只能下个月做喽,于是心血来潮玩了一下canvas终于有点门道了,暂且做个备忘,大家也给指点一下。

先展示一下效果

wxml 代码

<button >直线</button>

<canvas style="border:1px solid; width:99%;"  bindtouchstart="canvasBindStart" bindtouchmove="canvasBindMove" canvas-id="1"/>

js 代码

Page({
  data:{
    startX:0,
    startY:0,
    endX:0,
    endY:0
  },
    //绑定出没开始事件,记录起点
   canvasBindStart:function(e){
    var that = this;
    console.log(e);
    that.setData({
      startX:e.touches[0].x,//重点touches后边一定要加索引[0],不然读取不到坐标
      startY:e.touches[0].y//重点touches后边一定要加索引[0],不然读取不到坐标

    });

  },

  //绑定移动事件,并将坐标传递作为终点
  canvasBindMove:function(e){
    var that = this;
    that.setData({
      endX:e.touches[0].x,//重点touches后边一定要加索引[0],不然读取不到坐标
      endY:e.touches[0].y,//重点touches后边一定要加索引[0],不然读取不到坐标

    });
    console.log(e.touches[0].x);//重点touches后边一定要加索引[0],不然读取不到坐标
    //记录上下文
    var context = wx.createContext();
    //设置线条粗细
    context.setLineWidth(4);
    //设置直线的起点
    context.lineTo(that.data.startX, that.data.startY)
    //设置直线的终点
    context.lineTo(that.data.endX, that.data.endY)
    //设置描边,记住画直线一定要设置描边,否则没有图像
    context.stroke()
     wx.drawCanvas({
      canvasId: 1,
      actions: context.getActions()
    });
  },


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

梦醒时分

梦醒时分

APP:1 帖子:13 回复:127 积分:1665

已加入社区[741]天

我是来学习的

作者详情》
Top