小程序canvas怎么用

在wxml中添加<canvas></canvas>组件。注意，这里必须要给id属性，style属性中必须有饥孙width和height。关于width和height的值，有个技巧就是width为100%，height为window高度。

获取window的高度，宽度，和像素比例。

写画图方法。新建canvas的上下文环境context，通过画window大小的矩形来设置背景色为#ffffff，老肢饥将图片插入到canvas中（注意left，top，width，height等参数），将文本插入到canvas中。最后调用wx.drawCanvas()来将图形和文字绘制出来。

在onReady中准备好图片（因为后期需要长按保存，所以需要使用https下图片，这里先下载到缓存中），调用前面定义绘图方法。

图片生成侍返，在真机（注意一定要在真机上测试，因为经常会出现开发工具中是好的，但是真机不能画出来的问题，一定要注意！）上测试也通过，OK啦。（这里不贴手机上的截图了）。

canvas简单理解成一张历哗可以自定义大肢神行小（有上限）的画布，在画布上可以写字，画瞎颂图形，放置图片。一般可以用来动态生成截图，方便用户保存和转发。

官方资料：

https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.html

一、引入ec-canvas文件

https://github.com/ecomfe/echarts-for-weixin

“ec-canvas”

二、配置json

{

"usingComponents":{

"誉竖伍ec-canvas":"../../ec-canvas/ec-canvas"

}

}

三、书写结构

<view class="container log-list">

<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ec}}"></ec-canvas>

</view>

四、js文件

//logs.js

const util = require('../../utils/util.js')

import * as echarts from '../../ec-canvas/echarts'

const app = getApp()

function initChart(canvas,width,height){

const chart = echarts.init(canvas,null,{

width:width,

height:height

})

canvas.setChart(chart)

var option = {

color:["#37A2DA","#67E0E3","#9FE6B8"],

legend:{

data:["A","B","C"],

top:20,

left:"center",

z:100

},

grid:{

left:"3%",

right:"4%",

bottom:"3%",

containLabel:true

},

xAxis:{

type:"category",

boundaryGap:false,

data:["周一","周二","周三","周四","周五","周纤帆六","周日"]

}

chart.setOption(option)

return chart

}

Page({

onShareAppMessage:function(res){

return{

title:"Echarts",

path:"/pages/index/index",

success:function(){},

fail:function(){}

}

},

data: {

ec:{

onInit:initChart

},

logs: []

},

onReady(){},

onLoad: function () {

this.setData({

logs: (wx.getStorageSync('庆或logs') || []).map(log =>{

return util.formatTime(new Date(log))

})

})

}

})

---