【微信小程序之画布】一:canvas组件
微信小程序开发交流qq群 173683895
承接微信小程序开发。扫码加微信。
正文:
此文章主要是对canvas组件的介绍与基本的使用。在组件中绘画了一条固定的直线。
我们先了解一下canvas组件:
wxml:
<canvas class='myCanvas' canvas-id="myCanvas" bindtouchstart='EventHandleStart' bindtouchend='EventHandle' binderror="canvasIdErrorCallback" disable_scroll/>
注:
- canvas 标签默认宽度300px、高度225px
- 同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作
- disable_scroll属性可以禁止画布在移动时且有手势事件时,禁止屏幕滚动以及下拉刷新
wxss:
.myCanvas{border: 1px solid; //给一个边框
}
看一下效果:
咱们看一下js中是怎么对carvas操作的
//test.js
Page({data: {},onLoad: function () {},onReady:function(){var my_carvas = wx.createCanvasContext('myCanvas', this) //1.创建carvas实例对象,方便后续使用。my_carvas.setStrokeStyle('red') //设置边框颜色。my_carvas.moveTo(20,100) //设置绘画路线的起点 (20,100)>>>(当前画布对象的 x 轴,当前画布对象的 y 轴)my_carvas.lineTo(120, 100) //增加一个新点,然后创建一条从上次指定点到目标点的线。(120,100)>>>(当前画布对象的 x 轴,当前画布对象的 y 轴)my_carvas.stroke() //画出当前路径的边框。默认颜色色为黑色。my_carvas.draw() //将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中。}
})
设置起点与终点,绘画一条直线如图:(由左至右100个像素点)
canvas标签属性:
画布。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
canvas-id | String | canvas 组件的唯一标识符 | |
disable-scroll | Boolean | false | 当在 canvas 中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新 |
bindtouchstart | EventHandle | 手指触摸动作开始 | |
bindtouchmove | EventHandle | 手指触摸后移动 | |
bindtouchend | EventHandle | 手指触摸动作结束 | |
bindtouchcancel | EventHandle | 手指触摸动作被打断,如来电提醒,弹窗 | |
bindlongtap | EventHandle | 手指长按 500ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动 | |
binderror | EventHandle | 当发生错误时触发 error 事件,detail = {errMsg: 'something wrong'} |
注意事项:Bug & Tip
tip
:canvas
组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。tip
: 请勿在scroll-view
、swiper
、picker-view
、movable-view
中使用canvas
组件。tip
:css
动画对canvas
组件无效。bug
: 避免设置过大的宽高,在安卓下会有crash的问题
相关文章:

JavaScript的“ this”通过成立一个高中乐队来解释
by Kevin Kononenko凯文科诺年科(Kevin Kononenko) JavaScript的“ this”通过成立一个高中乐队来解释 (JavaScript’s “this” Explained By Starting A High School Band) If you have ever been in a band, had a friend that started a band, or seen a corny 80s movie …

Ubuntu 16.04 安装Django
> pip install django1.10.3......或者:> pip3 install django1.10.3(我采用)......或者:>python3 -m pip install django1.10.3......或者:pip install -i https://pypi.douban.com/simple/ django1.10.3......如果你只安装一个版本的 Python,…

【微信小程序之画布】三:手指触摸绘画椭圆
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 功能:根据手指触摸绘画一个椭圆路径--> 起点为手指开始触摸时的坐标,终点为手指触摸结束时的坐标 效果图: 组件属性的描述在上一节中描述过了&…

ACdream 1099——瑶瑶的第K大——————【快排舍半,输入外挂】
瑶瑶的第K大Time Limit:2000MS Memory Limit:128000KB 64bit IO Format:%lld & %llu Submit Status Practice ACdream 1099Description 一天,萌萌的妹子--瑶瑶(tsyao)很无聊,就来找你玩。可是你们都不知道玩什么。。。尴尬了一阵子ÿ…

开源贡献 计算_如何克服恐惧并为开源做贡献
开源贡献 计算Are you a new developer? Or maybe even just an old-timer who has been in a company for ten years, working on an in-house project, and now you’re thinking, “Hey, I’ve been in my box a long time. What’s new out there?” I have been like th…

Android学习笔记进阶十一图片动画播放(AnimationDrawable)
大家平时见到的最多的可能就是Frame动画了,Android中当然也少不了它。它的使用更加简单,只需要创建一个 AnimationDrawabledF对象来表示Frame动画,然后通过addFrame 方法把每一帧要显示的内容添加进去,并设置播放间隔时间…

JS 把url的参数解析成对象
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 实现思路:请看log和打印结果 // url参数解析 function getUrlkey(url) {var params {};var urls url.split("?"); console.log(1_分割url:,…

Objective-C代码的文件扩展名
转载于:https://www.cnblogs.com/123qw/p/4375299.html

公司成立两周年感言_对我的副项目成立一周年的一些反思
公司成立两周年感言by Will Abramson威尔艾布拉姆森(Will Abramson) 对我的副项目成立一周年的一些反思 (Some reflections on my side project’s first anniversary) My side project turns one this month. It has been a real learning roller coaster.我的副业这个月变成…

2017.4.18 静态代码分析工具sonarqube+sonar-runner的安装配置及使用
配置成功后的代码分析页面: 可以看到对复杂度、语法使用、重复度等等都做了分析,具体到了每一个方法和每一句代码。 四种使用方式: sonarqube sonar-runnersonarqube mavensonarqube eclipsesonarqube IDE IntelliJ使用方式1 :…

c中结构体的4种定义
1、常规的标准方式: 1 #include <stdio.h> 2 3 struct student{ 4 int age; 5 float score; 6 char sex; 7 }; 8 9 int main(int argc, char **argv) 10 { 11 struct student studenta { 12 30, 13 79.5, 14 …

js 时间戳与日期处理集合
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 一:获取当前日期 使用方式:console.log(util.formatTime()) 打印结果:2018/04/24 11:06:45 // 获取当前日期 function formatTime() {var date…

超赞网站推荐_字体(更多)超赞-标志性发明
超赞网站推荐by Pubudu Dodangoda通过Pubudu Dodangoda 字体(更多)超赞-标志性发明 (Font (More) Awesome — an iconic invention) Whether you are building a website, a mobile app, or even a standalone app, there are few things you can never escape. The proper us…

JAVA中的垃圾回收机制以及其在android开发中的作用
http://blog.csdn.net/xieqibao/article/details/6707519 这篇文章概述了JAVA中运行时数据的结构,以及垃圾回收机制的作用。在后半部分,描述了如何检测和定位ANDROID程序是否内存溢出。转载于:https://www.cnblogs.com/u3shadow/p/4379336.html

微信小程序把后台传过来的数组坐标展示在地图上
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 功能实现: 1. 根据后台传递过来的数据,包括地址名字,经纬度坐标等都展示在map组件上; 2. 点击相应地址实现用户当前位置导航至点击的…

Flask-login Question
1 未登录访问鉴权页面如何处理? 如果未登录访问了一个作了 login_required 限制的 view,那么 Flask-Login 会默认 flash一条消息,并且将重定向到login_view,如果你没有指定login_view,那么 Flask-Login 将会抛出一个 4…

愉快的舞会c++_如何在5分钟内建立一个令人愉快的加载屏幕
愉快的舞会cFirst, here is what we will build. Set your timer!首先,这是我们将要建立的。 设置您的计时器! Does this look familiar?这看起来很熟悉吗? If yes, that’s because you’ve seen this somewhere — Slack!如果是…

有关C/C++中,表达式计算顺序的问题,以及表达式内部变量“副作用”问题(转)...
经常可以在一些讨论组里看到下面的提问:“谁知道下面C语句给n赋什么值?”m 1; n mm;最近有位不相识的朋友发email给我,问为什么在某个C系统里,下面表达式打印出两个4,而不是4和5:a 4; cout << a &…

HDU 3001
题目中说明每个城市至少要走一次,至多走2次,因此要用到三进制压缩,然后就是状态转移方程了。 这道题就处理三进制的地方麻烦一点。同时注意,在选择最小长度时,一定是要每一个点都经过至少一次的,即是状态的…

微信小程序 侧滑效果实现
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 先看效果图: 源码: <view wx:if{{if_show}} class{{show_centent?"show":"hide"}} /> <button bindtapbtn>展示 or 隐藏&l…

im和音视频开发哪个更好_如何阅读成为更好的开发者的方式
im和音视频开发哪个更好by nolan grace通过诺兰格雷斯 如何阅读成为更好的开发者的方式 (How to read your way to becoming a better developer) If you want to get better at programming, there are two things you need to do:如果您想提高编程水平,则需要做两…

MVC3学习 四 EF删除操作
由于EF的框架是4.1的,所以现在如果想更新部分字段的话,只能从数据库中查出一次数据(不用查的方法还没找到,需要继续研究),不能像5.1的版本可以不用查。 更新的Action需要用到[HttpGet]和[HttpPost]…

ThinkPHP5.0中Redis的使用和封装(原创)
Redis是一种常用的非关系型数据库,主要用作数据缓存,数据保存形式为key-value,键值相互映射.它的数据存储跟MySQL不同,它数据存储在内存之中,所以数据读取相对而言很快,用来做高并发非常不错. ThinkPhP5.0自带了Redis扩展,在使用之前先下载php_redis.dll 网址 http://windows.p…

【微信小程序之画布】四:手指触摸绘波浪线
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 功能:根据手指触摸绘画一条直线路径--> 起点为手指开始触摸时的坐标,终点为手指触摸结束时的坐标 效果图: 上代码: <canvas clas…

saas的计费数据库设计_如何构建和扩展SaaS计费解决方案
saas的计费数据库设计您需要的最低可行产品 (What you need for a Minimum Viable Product) When you are building your Software as a Service (Saas) Minimum Viable Product (MVP), there is a lot of work that needs to be done. It can be difficult to balance this wo…

关于一对多,多对多的多表查询的控制
一、一对多 以班级Classes和学生Student为例:回忆sql语句://内链接,两种方式效果一样,查询的是两边都有的数据SELECT c.*,s.* FROM classes c,student s WHERE s.cidc.cid;SELECT c.cname,s.sname FROM classes c INNER JOIN student s ON s.cidc.cid;//左外连接&am…

JavaScript对象,方括号和算法
by Dmitri Grabov德米特里格拉波夫(Dmitri Grabov) JavaScript对象,方括号和算法 (JavaScript Objects, Square Brackets and Algorithms) One of the most powerful aspects of JavaScript is being able to dynamically refer to properties of objects. In this…

《Java 8 实战》(二)—— Lambda
Lambda表达式可以理解为简洁地表示可传递的匿名函数的一种方式:它没有名称,但它有参数列表/函数主体/返回类型,可能还有一个可以抛出的异常列表。 Lambda表达式由参数/箭头和主体组成: (Apple a1, Apple a2) -> a1.getWeight(…

c++回调函数 callback
(1)Callback方式Callback的本质是设置一个函数指针进去,然后在需要需要触发某个事件时调用该方法, 比如Windows的窗口消息处理函数就是这种类型。比如下面的示例代码,我们在Download完成时需要触发一个通知外面的事件:…

【微信小程序之画布】终:手指触摸画板实现
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 先看效果图: wxml <!--pages/shouxieban/shouxieban.wxml--> <view class"container"><view>手写板(请在下方区域手写内容&…