当前位置: 首页 > 编程日记 > 正文

【微信小程序之画布】一:canvas组件

微信小程序开发交流qq群   173683895

   承接微信小程序开发。扫码加微信。

正文:

此文章主要是对canvas组件的介绍与基本的使用。在组件中绘画了一条固定的直线。

我们先了解一下canvas组件:

wxml:

<canvas class='myCanvas' canvas-id="myCanvas" bindtouchstart='EventHandleStart' bindtouchend='EventHandle' binderror="canvasIdErrorCallback" disable_scroll/>

注:

  1. canvas 标签默认宽度300px、高度225px
  2. 同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作
  3. 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-idStringcanvas 组件的唯一标识符
disable-scrollBooleanfalse当在 canvas 中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新
bindtouchstartEventHandle手指触摸动作开始
bindtouchmoveEventHandle手指触摸后移动
bindtouchendEventHandle手指触摸动作结束
bindtouchcancelEventHandle手指触摸动作被打断,如来电提醒,弹窗
bindlongtapEventHandle手指长按 500ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动
binderrorEventHandle当发生错误时触发 error 事件,detail = {errMsg: 'something wrong'}

注意事项:Bug & Tip

  1. tipcanvas 组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。
  2. tip: 请勿在 scroll-viewswiperpicker-viewmovable-view 中使用 canvas 组件。
  3. tipcss 动画对 canvas 组件无效。
  4. 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&#xff08;我采用&#xff09;......或者:>python3 -m pip install django1.10.3......或者:pip install -i https://pypi.douban.com/simple/ django1.10.3......如果你只安装一个版本的 Python,…

【微信小程序之画布】三:手指触摸绘画椭圆

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

ACdream 1099——瑶瑶的第K大——————【快排舍半,输入外挂】

瑶瑶的第K大Time Limit:2000MS Memory Limit:128000KB 64bit IO Format:%lld & %llu Submit Status Practice ACdream 1099Description 一天&#xff0c;萌萌的妹子--瑶瑶(tsyao)很无聊&#xff0c;就来找你玩。可是你们都不知道玩什么。。。尴尬了一阵子&#xff…

开源贡献 计算_如何克服恐惧并为开源做贡献

开源贡献 计算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动画了&#xff0c;Android中当然也少不了它。它的使用更加简单&#xff0c;只需要创建一个 AnimationDrawabledF对象来表示Frame动画&#xff0c;然后通过addFrame 方法把每一帧要显示的内容添加进去&#xff0c;并设置播放间隔时间&#xf…

JS 把url的参数解析成对象

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文&#xff1a; 实现思路&#xff1a;请看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的安装配置及使用

配置成功后的代码分析页面&#xff1a; 可以看到对复杂度、语法使用、重复度等等都做了分析&#xff0c;具体到了每一个方法和每一句代码。 四种使用方式&#xff1a; sonarqube sonar-runnersonarqube mavensonarqube eclipsesonarqube IDE IntelliJ使用方式1 &#xff1a…

c中结构体的4种定义

1、常规的标准方式&#xff1a; 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 承接微信小程序开发。扫码加微信。 正文&#xff1a; 一&#xff1a;获取当前日期 使用方式&#xff1a;console.log(util.formatTime()) 打印结果&#xff1a;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中运行时数据的结构&#xff0c;以及垃圾回收机制的作用。在后半部分&#xff0c;描述了如何检测和定位ANDROID程序是否内存溢出。转载于:https://www.cnblogs.com/u3shadow/p/4379336.html

微信小程序把后台传过来的数组坐标展示在地图上

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

Flask-login Question

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

愉快的舞会c++_如何在5分钟内建立一个令人愉快的加载屏幕

愉快的舞会cFirst, here is what we will build. Set your timer!首先&#xff0c;这是我们将要建立的。 设置您的计时器&#xff01; Does this look familiar?这看起来很熟悉吗&#xff1f; If yes, that’s because you’ve seen this somewhere — Slack!如果是&#xf…

有关C/C++中,表达式计算顺序的问题,以及表达式内部变量“副作用”问题(转)...

经常可以在一些讨论组里看到下面的提问&#xff1a;“谁知道下面C语句给n赋什么值&#xff1f;”m 1; n mm;最近有位不相识的朋友发email给我&#xff0c;问为什么在某个C系统里&#xff0c;下面表达式打印出两个4&#xff0c;而不是4和5&#xff1a;a 4; cout << a &…

HDU 3001

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

微信小程序 侧滑效果实现

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文&#xff1a; 先看效果图&#xff1a; 源码&#xff1a; <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:如果您想提高编程水平&#xff0c;则需要做两…

MVC3学习 四 EF删除操作

由于EF的框架是4.1的&#xff0c;所以现在如果想更新部分字段的话&#xff0c;只能从数据库中查出一次数据&#xff08;不用查的方法还没找到&#xff0c;需要继续研究&#xff09;&#xff0c;不能像5.1的版本可以不用查。 更新的Action需要用到[HttpGet]和[HttpPost]&#xf…

ThinkPHP5.0中Redis的使用和封装(原创)

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

【微信小程序之画布】四:手指触摸绘波浪线

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文&#xff1a; 功能&#xff1a;根据手指触摸绘画一条直线路径--> 起点为手指开始触摸时的坐标&#xff0c;终点为手指触摸结束时的坐标 效果图&#xff1a; 上代码&#xff1a; <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为例&#xff1a;回忆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对象&#xff0c;方括号和算法 (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表达式可以理解为简洁地表示可传递的匿名函数的一种方式&#xff1a;它没有名称&#xff0c;但它有参数列表/函数主体/返回类型&#xff0c;可能还有一个可以抛出的异常列表。 Lambda表达式由参数/箭头和主体组成&#xff1a; (Apple a1, Apple a2) -> a1.getWeight(…

c++回调函数 callback

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

【微信小程序之画布】终:手指触摸画板实现

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文&#xff1a; 先看效果图&#xff1a; wxml <!--pages/shouxieban/shouxieban.wxml--> <view class"container"><view>手写板&#xff08;请在下方区域手写内容&…