canvas实现保存超出屏幕之外的内容

简述：先说一下，实现目标。
so,上图

因为，项目需求，需要把动态的课程表，实现点击保存按钮，实现将如上图一样的课程表保存到本地。
那么，实现的思路就是：

画布画出来，然后保存到本地

开发框架：uni，
开发工具：Hbulid-X，

既然有了思路，那么就好办了吧,我把课表分成了四个部分去画
1.左边的时间
2.顶部的场馆信息+底部的照片
3.底部的日期显示
4.课程表内容显示
把一张大图拆分四个部分画就很简单了。

但是，说一下，uni，编译成小程序的坑，首先，uni不支持es10的写法，亲测有效。

例如 ：项目中用到了 es10的String.trimStart() //截取字符串前面的空格 ，然后换成了String.trim()使用

此处已班生成课程表照片，封装成组件。话不多说，上菜

index.vue

<template>
	<view>	
		<canvasCourse :courseList='courseList' :variableMonth='variableMonth' :venueInfo='venueInfo' ></canvasCourse>
	</view>

</template>

<script>
	
	import canvasCourse from '@/components/canvasCourse.vue';

	export default {
		components: {
			canvasCourse,
		},

		data() {
			return {
			
				weeks: ['一', '二', '三', '四', '五', '六', '日'],
				variableMonth: ["7-10", "10-10", "7-10", "10-10", "7-10", "10-10", "9-30", "10-10"],
				venueInfo: {
					title: '王府健身',
					codeImg: '/static/table.png',
					logoImg: '/static/login.png'
				},
				courseList: [{
						startTime: '13.00', //用来显示纵表头课程的开始时间
						list: [{
								timeSlot: "8:00-12:00", //课程时间段
								courseName: "塑形", //课程名称
								coash: "rechel", //教练
								courseStar: 5, //课程难度
								courseColor: 'background: red;'

							},
							{
								timeSlot: "8:00-12:00", //课程时间段
								courseName: "减肥", //课程名称
								coash: "rechel", //教练
								courseStar: 5, //课程难度
								courseColor: 'background: yellow;'
							},
							{
								timeSlot: "8:00-12:00", //课程时间段
								courseName: "减肥", //课程名称
								coash: "rechel", //教练
								courseStar: 5, //课程难度
								courseColor: 'background: green;'
							},
							{
								timeSlot: "8:00-12:00", //课程时间段
								courseName: "减肥", //课程名称
								coash: "rechel", //教练
								courseStar: 5, //课程难度
								courseColor: 'bac