迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
不同的项目总是要求不同的需求 在下面的代码中,我自码了画福的canvas代码,及橡皮檫的代码; 下面的图中也需实现背景图的点击切换取,点击画图完毕按钮,就实现了内容的提交 wxml: <canvas canvas-width:{{Cwidth1}}px;height:{{Cheight1}}px;top:{{Ctop1}}px;left:{{Cleft1}}px disable-scroll="false" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"> </canvas> <view class="box box5" bindtap="clearCanvas"></view> //橡皮檫按钮 js: var canvasC ; //声明一个全局变量,用于橡皮檫 Page({ onLoad: function () {
var that = this;
wx.getSystemInfo({
success: function (res) {
W = res.windowWidth;
H = res.windowHeight;
that.setData({
Cwidth: W,
Cheight: H / 1.7,
Cwidth1: W,
Cheight1: H / 1.7,
Ctop1: 0,
Cleft1: 0
})
},
})
},
startX : 0; //保存X坐标轴变量 startY : 0; //保存Y坐标轴变量 //手指触摸动作开始 touchStart:function(e){ //得到触摸点的坐标 this.startX = e.changedTouches[0].x this.startY = e.changedTouches[0].y this.context = wx.createCanvasContext("myCanvas") canvasC = this.context; //将画布保存进全局变量 新添2018-3-6 this.context.setStrokeStyle("#ff0000") //设置笔触颜色 this.context.setLineWidth(10) //设置笔触粗细 this.context.setLineCap("round") //设置笔触线条圆润 this.context.beginPath() } //手指触摸后移动 touchMove:function(e){ var startX1 = e.changedTouches[0].x var startY1 = e.changedTouches[0].y this.context.moveTo(this.startX,this.startY) this.context.lineTo(startX1,startY1) this.context.stroke() this.startX = startX1; this.startY = startY1; wx.drawCanvas({ canvasId:"myCanvas", reserve:true, actions:this.context.getActions() //获取绘图动作数组 }) }, // 点击橡皮檫全部清除 clearCanvas:function(){ canvasC.clearRect(0,0,w,H/1.7); canvasC.draw() } }) |
请发表评论