小程序开发-Canvas画布组件
Canvas画布
基本使用方法:
- 在wxml中添加canvas组件
<canvas canvas-id='canvasDemo' class='demo'></canvas>
// canvas-id:必须填写
- 在对应js中执行绘画具体逻辑
// canvas.js
Page({
onReady() {
const query = wx.createSelectorQuery()
query.select('#canvasDemo')
.fields({ node: true, size: true })
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
ctx.fillRect(0, 0, 100, 100)
})
}
})
WebGL 示
绘图方法
CanvasContext.setFillStyle(color)
设置填充色
color
: 填充的颜色,默认颜色为black
CanvasContext.fill()
对当前路径中的内容进行填充。默认的填充色为黑色。
注意:如果当前路径没有闭合,fill() 方法会将起点和终点进行连接,然后填充。
fill() 填充的的路径是从 beginPath() 开始计算,但是不会将 fillRect() 包含进去。
CanvasContext.setStrokeStyle(color)
设置描边色
color
: 填充的颜色,默认颜色为black
CanvasContext.stroke()
画出当前路径的边框。默认颜色色为黑色。
stroke() 描绘的的路径是从 beginPath() 开始计算,但是不会将 strokeRect() 包含进去。CanvasContext.beginPath()
开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边
- 在最开始的时候相当于调用了一次 beginPath。
- 同一个路径内的多次 setFillStyle、setStrokeStyle、setLineWidth等设置,以最后一次设置为准。
CanvasContext.closePath()
把路径移动到画布中的指定点,不创建线条。用 stroke 方法来画线条
- x: 目标位置的 x 坐标
- y: 目标位置的 y 坐标
CanvasContext.moveTo(x, y)
把路径移动到画布中的指定点,不创建线条。用 stroke 方法来画线条
- x: 目标位置的 x 坐标
- y: 目标位置的 y 坐标
CanvasContext.draw(reserve, callback)
将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中。
- reserve: 本次绘制是否接着上一次绘制。即 reserve 参数为 false,则在本次调用绘制之前 native 层会先清空画布再继续绘制;若 reserve 参数为 true,则保留当前画布上的内容,本次调用 drawCanvas 绘制的内容覆盖在上面,默认 false
- callback: 绘制完成后执行的回调函数
CanvasContext.rect(x, y, width, height)
创建一个矩形路径。需要用 fill或者 stroke 方法将矩形真正的画到 canvas 中
- x: 矩形路径左上角的横坐标
- y: 矩形路径左上角的纵坐标
- width: 矩形路径的宽度
- height: 矩形路径的高度
CanvasContext.fillRect(x, y, width, height)
填充一个矩形。用 setFillStyle 设置矩形的填充色,如果没设置默认是黑色。
- x: 矩形路径左上角的横坐标
- y: 矩形路径左上角的纵坐标
- width: 矩形路径的宽度
- height: 矩形路径的高度
CanvasContext.lineTo(x, y)
增加一个新点,然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条
- x: 目标位置的 x 坐标
- y: 目标位置的 y 坐标
小程序开发-Canvas画布组件的更多相关文章
- 微信小程序 在canvas画布上划动,页面禁止滑动
要实现微信小程序 在canvas画布上划动,页面禁止滑动,不仅要设置disable-scroll="true",还要要给canvas绑定一个触摸事件才能生效. <canvas ...
- 微信小程序开发—快速掌握组件及API的方法
微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...
- 微信小程序开发—快速掌握组件及API的方法---转载
微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...
- 微信小程序开发05-日历组件的实现
接上文:微信小程序开发04-打造自己的UI库 github地址:https://github.com/yexiaochai/wxdemo 我们这里继续实现我们的日历组件,这个日历组件稍微有点特殊,算是 ...
- 小程序开发-Map地图组件
Map组件 是原生组件,使用时请注意相关限制.个性化地图能力可在小程序后台"设置-开发者工具-腾讯位置服务"申请开通. 设置subkey后,小程序内的地图组件均会使用该底图效果,底 ...
- 兼容小程序的canvas画图组件jmGraph
基于CANVAS的简单画图组件让你用类似于dom的方式,在canvas上画图,感觉会不会很爽. 主页:http://graph.jm47.com/示例:http://graph.jm47.com/ex ...
- 手摸手教你微信小程序开发之自定义组件
前言 相信大家在开发小程序时会遇到某个功能多次使用的情况,比如弹出框.这个时候大家首先想到的是组件化开发,就是把弹出框封装成一个组件,然后哪里使用哪里就调用,对,看来大家都是有思路的人,但是要怎样实现 ...
- 微信小程序开发之日期组件
一: wxml: <view class="navbarlift" style="background:#ffffff;padding:20rpx"> ...
- 微信小程序开发06-一个业务页面的完成
前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...
随机推荐
- 使用docker快速搭建hive环境
记录一下使用docker快速搭建部署hive环境 目录 写在前面 步骤 安装docker 安装docker 安装docker-compose 配置docker国内镜像源(可选) 安装git & ...
- 谁先执行?props还是data或是其他? vue组件初始化的执行顺序详解
初入vue的朋友可能会疑惑,组件初始化的时候,created,props,data到底谁先执行? 今天,我就带大家从源码的角度看看到底谁先执行? 我们知道,vue是个实例 那我们就从new Vue() ...
- java 启动Tomcat报错:The specified JRE installation does not exist
启动TomCat服务报错: The specified JRE installation does not exist 解决方法: Eclipse:window->perferences-> ...
- Css 图片自适应
设置 CSS .container{ overflow:auto; } img{ width:100%; height:auto; overflow:hidden; } 设置 template < ...
- 从系统报表页面导出20w条数据到本地只用了4秒,我是如何做到的
背景 最近有个学弟找到我,跟我描述了以下场景: 他们公司内部管理系统上有很多报表,报表数据都有分页显示,浏览的时候速度还可以.但是每个报表在导出时间窗口稍微大一点的数据时,就异常缓慢,有时候多人一起导 ...
- printf函数和putchar函数
#define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<string.h> #include<stdlib. ...
- Es6扩展运算符--三点运算符(...)--展开语法(Spread syntax)
0.看文档呀 关于拓展运算符更详细的解释见 > MDN展开语法 关于剩余参数更详细的解释见 >MDN剩余参数 关于解构赋值更详细的解释见 >MDN解构赋值 直接看上面的文档更好 1. ...
- Redis设计与实现——数据结构与对象
SDS 简单动态字符串 在redis数据库里面,包含字符串值得键值对在底层都是由SDS实现的. redis > set msg "hello world" 1)键值对的键是 ...
- Windows 安装 kafka
1.kafka下载地址:http://kafka.apache.org/downloads 解压:kafka_2.12-2.6.0.tgz 2.配置zookeeper 进入config目录找到文件zo ...
- java进阶(8)--匿名类
一.概念 1.内部类:类的内部定义了一个类 2.内部类分类:静态内部类.实例内部类.局部内部类 3.缺点:内部类的可读性比较差,尽量不用 2.匿名内部类:局部内部类的一种 二.匿名内部类的缺点 1 ...