- 浏览: 33098 次
最新评论
源码
index.html
<view class="container">
<!--画布区域-->
<view class="canvas_area">
<!--注意:同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作-->
<canvas canvas-id="myCanvas" class="myCanvas"
disable-scroll="false"
bindtouchstart="touchStart"
bindtouchmove="touchMove"
bindtouchend="touchEnd">
</canvas>
</view>
<!--画布工具区域-->
<view class="canvas_tools">
<view class="box box1" bindtap="penSelect" data-param="5"></view>
<view class="box box2" bindtap="penSelect" data-param="15"></view>
<view class="box box3" bindtap="colorSelect" data-param="#cc0033"></view>
<view class="box box4" bindtap="colorSelect" data-param="#ff9900"></view>
<view class="box box5" bindtap="clearCanvas"></view>
</view>
</view>
手指滑动代码
//手指触摸动作开始
touchStart: function (e) {
//得到触摸点的坐标
this.startX = e.changedTouches[0].x
this.startY = e.changedTouches[0].y
this.context = wx.createContext()
if(this.isClear){ //判断是否启用的橡皮擦功能 ture表示清除 false表示画画
this.context.setStrokeStyle('#F8F8F8') //设置线条样式 此处设置为画布的背景颜色 橡皮擦原理就是:利用擦过的地方被填充为画布的背景颜色一致 从而达到橡皮擦的效果
this.context.setLineCap('round') //设置线条端点的样式
this.context.setLineJoin('round') //设置两线相交处的样式
this.context.setLineWidth(20) //设置线条宽度
this.context.save(); //保存当前坐标轴的缩放、旋转、平移信息
this.context.beginPath() //开始一个路径
this.context.arc(this.startX,this.startY,5,0,2*Math.PI,true); //添加一个弧形路径到当前路径,顺时针绘制 这里总共画了360度 也就是一个圆形
this.context.fill(); //对当前路径进行填充
this.context.restore(); //恢复之前保存过的坐标轴的缩放、旋转、平移信息
}else{
this.context.setStrokeStyle(this.data.color)
this.context.setLineWidth(this.data.pen)
this.context.setLineCap('round') // 让线条圆润
this.context.beginPath()
}
},
//手指触摸后移动
touchMove: function (e) {
var startX1 = e.changedTouches[0].x
var startY1 = e.changedTouches[0].y
if(this.isClear){ //判断是否启用的橡皮擦功能 ture表示清除 false表示画画
this.context.save(); //保存当前坐标轴的缩放、旋转、平移信息
this.context.moveTo(this.startX,this.startY); //把路径移动到画布中的指定点,但不创建线条
this.context.lineTo(startX1,startY1); //添加一个新点,然后在画布中创建从该点到最后指定点的线条
this.context.stroke(); //对当前路径进行描边
this.context.restore() //恢复之前保存过的坐标轴的缩放、旋转、平移信息
this.startX = startX1;
this.startY = startY1;
}else{
this.context.moveTo(this.startX, this.startY)
this.context.lineTo(startX1, startY1)
this.context.stroke()
this.startX = startX1;
this.startY = startY1;
}
//只是一个记录方法调用的容器,用于生成记录绘制行为的actions数组。context跟<canvas/>不存在对应关系,一个context生成画布的绘制动作数组可以应用于多个<canvas/>
wx.drawCanvas({
canvasId: 'myCanvas',
reserve: true,
actions: this.context.getActions() // 获取绘图动作数组
})
}
以上是一部分代码展示,下面做核心原理说明:
1、能画出不同颜色的线条 主要是以下三个方法 setStrokeStyle(画笔的颜色) moveTo(把路径移动到画布中的指定点,但不创建线条) lineTo(添加一个新点,然后在画布中创建从该点到最后指定点的线条) 这样就可以从A点坐标到B点坐标 画出不同颜色的线条啦!!!
2、橡皮擦的原理:之所以能擦掉画布上的图像就是通过把要擦掉的区域绘制成与画布一样的颜色 这样就可以”欺骗”自己的眼睛 达到橡皮擦的效果啦!!!
源码链接请戳:http://bbs.jointforce.com/topic/24201
发表评论
-
微信小程序之提高应用速度小技巧
2017-03-17 17:08 10221、提高页面加载速度 ... -
微信小程序支付(java后端)
2017-02-27 14:38 10316第一步 进入小程序,下单,请求下单支付,调用小程序登录AP ... -
高效编写微信小程序
2017-02-22 15:26 433微信小程序是一个工程,就和盖房子一样,打好了地基,才能保证后续 ... -
微信小程序开放部分模糊搜索,你怎么看?
2017-02-13 16:22 372今天看到一则新闻,微信小程序开始开放模糊搜索了,所以亲自测试了 ... -
微信小程序编写tabBar模板,map组件markers属性动态初始化
2017-02-07 16:04 2107一:编写tabBar模板 众所周知,微信小程序的tabBar ... -
目前为止小程序审核不通过原因整理汇总
2017-01-23 14:57 8571、小程序简介没有介绍小程序功能 2、类目与页面提供的内容不一 ... -
微信小程序之图书管理系统(wepy版)
2017-01-19 14:42 10492016年小程序的推出,刷爆了朋友圈。作为一名好奇的程序猿 ... -
微信小程序form组件
2017-01-18 15:29 1006form 组件 表单 主要属性: 效果图: form. ... -
wafer-master小程序
2017-01-13 15:00 557wafer-master小程序 1、Centos 重启ngin ... -
信小程序参数二维码的8大使用场景
2017-01-12 15:13 661一、小程序参数二维码的8大使用场景 1 地推。 使用 ... -
小程序用户反馈-HotApp小程序统计仿微信聊天用户反馈组件...
2017-01-06 14:46 521用户反馈是小程序开发 ... -
小程序是微信最后的机会吗?它能做多大?
2017-01-05 15:46 497微信小程序又刷屏了。 ... -
获得session_key和openId(加解密、签名系列)
2016-12-26 15:57 9881:session_key和openId是什么?session ... -
5个关键词看小程序和App的UI设计异同
2016-12-23 14:20 484关键词一:友好礼貌对应于苹果:Less is more 苹果在 ... -
微信小程序正式发布官方视觉组件库,传递了怎样的信号?
2016-12-21 17:16 48512月16日,微信正式发布了WeUI.js动态视觉组件库。We ... -
《转》小程序之本地缓存
2016-12-16 15:07 888目前,微信给每个小程序提供了10M的本地缓存空间 有了本地缓存 ... -
深度加速:微信小程序将成为下一个风口
2016-12-09 16:58 3142016年11月3日,“小程 ... -
深度加速:微信小程序将成为下一个风口
2016-12-09 16:55 4142016年11月3日,“小程序 ...
相关推荐
微信小程序demo组件:canvas股票分时图(源代码+截图)微信小程序demo组件:canvas股票分时图(源代码+截图)微信小程序demo组件:canvas股票分时图(源代码+截图)微信小程序demo组件:canvas股票分时图(源代码+截图)微信...
先看下微信小程序canvas拖拽功能 组件地址 github.com/jasondu/wx-… readme近期补上 实现效果 如何实现 使用canvas 使用movable-view标签 由于movable-view无法实现旋转,所以选择使用canvas 需要解决的问题 ...
基于canvas 2D(高性能)实现微信小程序自定义组件-环形进度条 可定义大小,颜色,渐变等,也可自行扩展更多属性
WeZRender:微信小程序Canvas增强组件 WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender。 使用 WXML: JS: var wezrender = require('../../lib/wezrender'); zr = wezrender.zrender...
微信小程序canvas原生定制名片
试验性质的一个微信小程序,用canvas做的一个类似flappy-bird的小游戏。 包含一些基本的功能:躲避障碍物、计分、排行榜等等。后端的工程也一并上传了,在java目录中,很简单的一个SpringMVC工程。 游戏原型见这里。...
微信小程序canvas画布绘制矩形、椭(圆)、直线、文字
cavas组件编辑图片,添加文字,修改背景颜色等,来源为github
微信小程序使用canvas绘图并且把图片上传到服务器上面
微信小程序canvas实现矩形缩放
微信小程序canvas实现椭圆(圆形)元素自由移动,包含小程序项目所有文件,在小程序开发工具可直接打开,也可单独查看whml、wxss、js文件查看实现细节。
微信小程序 Canvas 封装的画板,支持画图,签名,生成图片....,使用简单方便再次修改自定义!
微信小程序基于canvas实现纯色背景抠图功能,值得一看和学习;微信小程序基于canvas实现纯色背景抠图功能,值得一看和学习;微信小程序基于canvas实现纯色背景抠图功能,值得一看和学习;微信小程序基于canvas实现...
WeZRender:微信小程序 Canvas 增强组件
微信小程序canvas实现直线自由移动,包含小程序项目所有文件,在小程序开发工具可直接打开,也可单独查看whml、wxss、js文件查看实现细节。
微信小程序canvas画图功能实现
微信小程序canvas实现文字缩放,包含小程序项目所有文件,在小程序开发工具可直接打开,也可单独查看whml、wxss、js文件查看实现细节。
微信小程序签字板,实现在微信小程序签字并保存签字图片
1.We-Canvas之WaveImage 效果图: 实现细节: 1.js: drawImage:function(data){ var that = this var p10= data[0][0]; /* 三阶贝塞尔曲线起点坐标值*/ var p11= data[0][1]; /* 三阶贝塞尔曲线第一个控制点坐...