微信小程序能用canvas吗

微信小程序里的canvas 非 h5 canvas有很多不一样的地方，以下把微信小程序的canvas叫做wxcanvas

下面全是我一点点测试出的干货，耐心看：

1wxcanvas,不像h5canvas那样有width和height属性和width和height的style样式。他只有style样式，可以理解为他就是个框吧；

2wxcanvas不要当成真的H5canvas，就当它是个div就行，画出范围的东西也是存在的，改变width,height就显示出来了，或者说这里有重绘，但具体如何实现的不知道；

3改变wxcanvas的style的width,height，并不改为原画布上的东西的大小；

4css transform变换中的变大缩小也无法改变原画布上的东西大小

5官方说法：context只是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。context跟<canvas/>不存在对应关系，一个context生成画布的绘制动作数组可以应用于多个<canvas/>。

实际上，contextgetActions()后，context中的信息会被清空，如果想重复利用，需要var temp=contextgetActions()将 *** 作数组保存下来，才可重复用于wxdrawcanvas；

6注意

wxdrawCanvas({canvasId: 'target',actions: contextgetActions()});

默认会清空画布，想不清空需要

wxdrawCanvas({ canvasId: 'target', actions: contextgetActions(), reserve:true});

7《重点》

<canvas disable-scroll="true" catchtouchmove="ccvsMove" bindtouchmove="cvsMove" canvas-id="target" id="target" style='width:{{width}}px;height:{{height}}px'></canvas>

注意，disable-scroll="true"和bindtouchmove="cvsMove"同时存在时才能避免页面跟着动，catchtouchmove是不行的

上面的写法，ccvsMove和cvsMove会都触发，

ccvsMove返回的是普通touch事件对象，有pageX,clientX等，

cvsMove返回的是canvasTouch事件对象，没有pageX,clientX,只有x,y

8

wxdrawCanvas({ canvasId: 'target', actions: [], reserve:false});

可以清空画布和画布的状态

9画布的scale tranlate rotate等状态，在reserve:true时会接着上次的状态

10 contextgetActions()返回的数组很有用，打印出来你会发现里面的内容你都能看懂，可以直接修改数组改变画的动作

11wxdrawCanvas时contextdrawImage在手机上可以画出来，在电脑开发工具上画不出来

12wxcanvasToTempFilePath

官方文档中只有一行，原来

wxcanvasToTempFilePath参数为一个对象包括canvasID,success,fail,complete，和wxsaveFile差不多；wxcanvasToTempFilePath({ canvasId: 'target', success: function success(res) { wxsaveFile({ tempFilePath: restempFilePath, success: function success(res) { consolelog('saved::' + ressavedFilePath); }, complete: function fail(e) { consolelog(eerrMsg); } }); }, complete: function complete(e) { consolelog(eerrMsg); }});

1基础组件：

什么是组件：

<ul>

<li>组件是视图层的基本组成单元。</li>

<li>组件自带一些功能与微信风格的样式。</li>

<li>一个组件通常包括开始标签

和结束标签

，属性

用来修饰这个组件，内容

在两个标签之内。</li>

</ul>

2属性类型

<ul>

<li>Boolean 布尔值 组件写上该属性，不管该属性等于什么，其值都为true

，只有组件上没有写该属性时，属性值才为false

。如果属性值为变量，变量的值会被转换为Boolean类型</li>

<li>Number 数字 1

, 25</li>

<li>String 字符串 "string"</li>

<li>Array 数组 [ 1, "string" ] </li>

<li>Object 对象 { key: value } </li>

<li>EventHandler 事件处理函数名 "handlerName"

是 Page中定义的事件处理函数名</li>

<li>Any 任意属性 </li>

</ul>

3共同属性类型

id , class , style , hidden , data- , bind / catch

4特殊属性

几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰

5组件列表

基础组件分为以下八大类：

视图容器(View Container)：

view 视图容器 , scroll-view 可滚动视图容器, swiper 滑块视图容器

基础内容(Basic Content)：

icon 图标, text 文字, progress 进度条

表单(Form)：

button 按钮, form 表单， input 输入框， checkbox 多想选择器, radio 单选器， picker 列表选择器, slider 滚动选择器, switch 开关选择器, label 标签

*** 作反馈（Interaction）

action-sheet 上拉菜单

modal 模态d窗

toast 消息提示框

loading 加载提示符

导航Navigation

navigator 应用链接

多媒体(Media)

audio 音频, image ， video 视频

地图

map 地图

画布Canvas

canvas 画布

flex: vt折曲，使收缩； vi玩去，收缩

 <button bindtap="powerDrawer" type="primary" size="mini" style="width: 55%;" data-statu="open">中奖记录</button>  

<!-- 中间名单d窗 -->

<view class="drawer_div">

  <view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>

    <view animation="{{animationPrize}}" class="drawer_box" wx:if="{{showModalStatus}}">

      <view class="drawer_title">

        中奖记录

        <image src="/img/x@2xpng" bindtap="powerDrawer" data-statu="close"></image>

      </view>

      <view class="drawer_content">

        <view class="top grid">

          <text>

            名称：啦啦啦啦啦啦啦啦

          </text>

          <text>

            时间：2020-02-20

          </text>

        </view>

        <view class="top grid">

          <text>

            名称：啦啦啦啦啦啦啦啦

          </text>

          <text>

            时间：2020-02-20

          </text>

        </view>

    </view>

  </view>

</view>

drawer_screen {

  width: 100%;

  height: 100%;

  position: fixed;

  top: 0;

  left: 0;

  z-index: 1000;

  background: #000;

  opacity: 05;

  overflow: hidden;

}

/content/

drawer_box {

  width: 650rpx;

  overflow: hidden;

  position: fixed;

  top: 50%;

  left: 0;

  z-index: 1001;

  background: #FAFAFA;

  margin: -150px 50rpx 0 50rpx;

  border-radius: 3px;

}

drawer_title{

  padding:30rpx 20rpx;

  font-size: 36rpx;

  text-align: center;

  position: relative;

}

drawer_title image{

  display: inline-block;

  width: 30rpx;

  height: 30rpx;

  position: absolute;

  right: 9px;

  top: 10px;

}

drawer_content {

  height: 210px;

  overflow-y: scroll; /超出父盒子高度可滚动/

  padding: 0 20rpx;

}

top{

  display: flex;

  justify-content: space-between;

  border-bottom: 1px dashed #ccc;

}

top text{

  display: inline-block;

  height: 60rpx;

  line-height: 20rpx;

}

data: {

animationPrize: {},

}

powerDrawer: function (e) {

    // consolelog(e);

    let currentStatu = ecurrentTargetdatasetstatu;

    thisutil(currentStatu);

  },

  util: function (currentStatu) {

    / 动画部分 /

    // 第1步：创建动画实例

    var animation = wxcreateAnimation({

      duration: 200,  //动画时长

      timingFunction: "linear", //线性

      delay: 0  //0则不延迟

    });

    // 第2步：这个动画实例赋给当前的动画实例

    thisanimation = animation;

    // 第3步：执行第一组动画

    animationopacity(0)rotateX(-100)step();

    // 第4步：导出动画对象赋给数据对象储存

    thissetData({

      animationPrize: animationexport()

    })

    // 第5步：设置定时器到指定时候后，执行第二组动画

    setTimeout(function () {

      // 执行第二组动画

      animationopacity(1)rotateX(0)step();

      // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象

      thissetData({

        animationPrize: animation

      })

      //关闭

      if (currentStatu == "close") {

        thissetData({

          showModalStatus: false

        });

      }

    }bind(this), 200)

    // 显示

    if (currentStatu == "open") {

      thissetData({

        showModalStatus: true

      });

    }

  },

本篇文章给大家介绍一下在微信小程序中怎么让scroll-view按照指定位置滚动，无需在写额外的js脚本，就可获得极佳的体验，希望对大家有所帮助！

背景是这样的，微信小程序有一个tab切换页面，tab切换页面有两个内容框，我是使用scroll-view进行制作，然后在切换tab页面时，相应的scroll-view里的滚动条需要置顶处理。相关学习推荐：小程序开发教程

我们可以看到官方文档描述scroll-view里有一个scroll-into-view属性，该属性的描述如下

scroll-into-view的值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

那么我们可以在这个属性里大作文章，只要在scroll-view里放置一个id值为设置的一个自定义值就可以实现切换tab时，对应的内容框滚动条都自动滚到顶部，如下面代码所示，下面代码是我使用Taro小程序框架演示的，原生的也同理。

import Taro from '@Tarojs/Taro'

import { View } from '@Tarojs/components'

import { AtTabs, AtTabsPane } from 'Taro-ui'

export default class Index extends TaroComponent {

constructor () {

super(arguments)

thisstate = {

current: 0,

}

}

handleClick (value) {

thissetState({

current: value

})

}

render () {

const tabList = [{ title: '标签第一页' }, { title: '标签第二页' }, { title: '标签第三页' }]

return (

<AtTabs current={thisstatecurrent} tabList={tabList} onClick={thishandleClickbind(this)}>

<AtTabsPane current={thisstatecurrent} index={0} >

<ScrollView scrollY scrollIntoView='content-0'>

<View id='content-0'></View>

标签页一的内容

</ScrollView>

</AtTabsPane>

<AtTabsPane current={thisstatecurrent} index={1} >

<ScrollView scrollY scrollIntoView='content-1'>

<View id='content-1'></View>

标签页二的内容

</ScrollView>

</AtTabsPane>

<AtTabsPane current={thisstatecurrent} index={2} >

<ScrollView scrollY scrollIntoView='content-2'>

<View id='content-2'></View>

标签页三的内容

</ScrollView>

</AtTabsPane>

</AtTabs>

)

}

}

如第一个tab的scroll-view里放置一个id值为content-0的view，那么在切换tab页时，scroll-view会根据我们设置的scroll-into-view属性定位到子元素的id上，到达滚动条自动置顶的效果

<AtTabsPane current={thisstatecurrent} index={0} >

<ScrollView scrollY scrollIntoView='content-0'>

<View id='content-0'></View>

标签页一的内容

</ScrollView>

</AtTabsPane>

同理的，假如需要滚动条滚到最低下，把相应的子元素id放到最低下即可，例如某些聊天界面，需要定位到最新那条

<AtTabsPane current={thisstatecurrent} index={0} >

<ScrollView scrollY scrollIntoView='content-0'>

标签页一的内容

<View id='content-0'></View>

</ScrollView>

</AtTabsPane>

更多编程相关知识，请访问：编程视频！！

以上就是关于微信小程序能用canvas吗全部的内容，包括:微信小程序能用canvas吗、微信小程序_组件、微信小程序 自定义d窗等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！