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 示

绘图方法

  1. CanvasContext.setFillStyle(color) 设置填充色

    color: 填充的颜色,默认颜色为black

  2. CanvasContext.fill() 对当前路径中的内容进行填充。默认的填充色为黑色。

注意:如果当前路径没有闭合,fill() 方法会将起点和终点进行连接,然后填充。

fill() 填充的的路径是从 beginPath() 开始计算,但是不会将 fillRect() 包含进去。

  1. CanvasContext.setStrokeStyle(color) 设置描边色

    color: 填充的颜色,默认颜色为black

  2. CanvasContext.stroke() 画出当前路径的边框。默认颜色色为黑色。

    stroke() 描绘的的路径是从 beginPath() 开始计算,但是不会将 strokeRect() 包含进去。

  3. CanvasContext.beginPath() 开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边

  • 在最开始的时候相当于调用了一次 beginPath。
  • 同一个路径内的多次 setFillStyle、setStrokeStyle、setLineWidth等设置,以最后一次设置为准。
  1. CanvasContext.closePath() 把路径移动到画布中的指定点,不创建线条。用 stroke 方法来画线条
  • x: 目标位置的 x 坐标
  • y: 目标位置的 y 坐标
  1. CanvasContext.moveTo(x, y) 把路径移动到画布中的指定点,不创建线条。用 stroke 方法来画线条
  • x: 目标位置的 x 坐标
  • y: 目标位置的 y 坐标
  1. CanvasContext.draw(reserve, callback) 将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中。
  • reserve: 本次绘制是否接着上一次绘制。即 reserve 参数为 false,则在本次调用绘制之前 native 层会先清空画布再继续绘制;若 reserve 参数为 true,则保留当前画布上的内容,本次调用 drawCanvas 绘制的内容覆盖在上面,默认 false
  • callback: 绘制完成后执行的回调函数
  1. CanvasContext.rect(x, y, width, height) 创建一个矩形路径。需要用 fill或者 stroke 方法将矩形真正的画到 canvas 中
  • x: 矩形路径左上角的横坐标
  • y: 矩形路径左上角的纵坐标
  • width: 矩形路径的宽度
  • height: 矩形路径的高度
  1. CanvasContext.fillRect(x, y, width, height) 填充一个矩形。用 setFillStyle 设置矩形的填充色,如果没设置默认是黑色。
  • x: 矩形路径左上角的横坐标
  • y: 矩形路径左上角的纵坐标
  • width: 矩形路径的宽度
  • height: 矩形路径的高度
  1. CanvasContext.lineTo(x, y) 增加一个新点,然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条
  • x: 目标位置的 x 坐标
  • y: 目标位置的 y 坐标

小程序开发-Canvas画布组件的更多相关文章

  1. 微信小程序 在canvas画布上划动,页面禁止滑动

    要实现微信小程序 在canvas画布上划动,页面禁止滑动,不仅要设置disable-scroll="true",还要要给canvas绑定一个触摸事件才能生效. <canvas ...

  2. 微信小程序开发—快速掌握组件及API的方法

    微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...

  3. 微信小程序开发—快速掌握组件及API的方法---转载

    微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...

  4. 微信小程序开发05-日历组件的实现

    接上文:微信小程序开发04-打造自己的UI库 github地址:https://github.com/yexiaochai/wxdemo 我们这里继续实现我们的日历组件,这个日历组件稍微有点特殊,算是 ...

  5. 小程序开发-Map地图组件

    Map组件 是原生组件,使用时请注意相关限制.个性化地图能力可在小程序后台"设置-开发者工具-腾讯位置服务"申请开通. 设置subkey后,小程序内的地图组件均会使用该底图效果,底 ...

  6. 兼容小程序的canvas画图组件jmGraph

    基于CANVAS的简单画图组件让你用类似于dom的方式,在canvas上画图,感觉会不会很爽. 主页:http://graph.jm47.com/示例:http://graph.jm47.com/ex ...

  7. 手摸手教你微信小程序开发之自定义组件

    前言 相信大家在开发小程序时会遇到某个功能多次使用的情况,比如弹出框.这个时候大家首先想到的是组件化开发,就是把弹出框封装成一个组件,然后哪里使用哪里就调用,对,看来大家都是有思路的人,但是要怎样实现 ...

  8. 微信小程序开发之日期组件

    一: wxml: <view class="navbarlift" style="background:#ffffff;padding:20rpx"> ...

  9. 微信小程序开发06-一个业务页面的完成

    前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...

随机推荐

  1. 使用docker快速搭建hive环境

    记录一下使用docker快速搭建部署hive环境 目录 写在前面 步骤 安装docker 安装docker 安装docker-compose 配置docker国内镜像源(可选) 安装git & ...

  2. 谁先执行?props还是data或是其他? vue组件初始化的执行顺序详解

    初入vue的朋友可能会疑惑,组件初始化的时候,created,props,data到底谁先执行? 今天,我就带大家从源码的角度看看到底谁先执行? 我们知道,vue是个实例 那我们就从new Vue() ...

  3. java 启动Tomcat报错:The specified JRE installation does not exist

    启动TomCat服务报错: The specified JRE installation does not exist 解决方法: Eclipse:window->perferences-> ...

  4. Css 图片自适应

    设置 CSS .container{ overflow:auto; } img{ width:100%; height:auto; overflow:hidden; } 设置 template < ...

  5. 从系统报表页面导出20w条数据到本地只用了4秒,我是如何做到的

    背景 最近有个学弟找到我,跟我描述了以下场景: 他们公司内部管理系统上有很多报表,报表数据都有分页显示,浏览的时候速度还可以.但是每个报表在导出时间窗口稍微大一点的数据时,就异常缓慢,有时候多人一起导 ...

  6. printf函数和putchar函数

    #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<string.h> #include<stdlib. ...

  7. Es6扩展运算符--三点运算符(...)--展开语法(Spread syntax)

    0.看文档呀 关于拓展运算符更详细的解释见 > MDN展开语法 关于剩余参数更详细的解释见 >MDN剩余参数 关于解构赋值更详细的解释见 >MDN解构赋值 直接看上面的文档更好 1. ...

  8. Redis设计与实现——数据结构与对象

    SDS 简单动态字符串 在redis数据库里面,包含字符串值得键值对在底层都是由SDS实现的. redis >  set msg "hello world" 1)键值对的键是 ...

  9. Windows 安装 kafka

    1.kafka下载地址:http://kafka.apache.org/downloads 解压:kafka_2.12-2.6.0.tgz 2.配置zookeeper 进入config目录找到文件zo ...

  10. java进阶(8)--匿名类

    一.概念 1.内部类:类的内部定义了一个类 2.内部类分类:静态内部类.实例内部类.局部内部类 3.缺点:内部类的可读性比较差,尽量不用 2.匿名内部类:局部内部类的一种   二.匿名内部类的缺点 1 ...