(A4) 210mm × 285mm
(A4) 210mm × 285mm 
(A4) 210mm × 285mm
(单位：mm)
16开 大度：210×285 　正度：185×260 
8开 大度：285×420 　正度：260×370 
4开 大度：420×570 　正度：370×540 
2开 大度：570×840 　正度：540×740 
全开 大：889×1194 　 小：787×1092 　　　
封套标准尺寸：220mm × 305mm 　
13cm × 18cm
19cm × 25cm
42cm × 57cm
50cm × 70cm
60cm × 90cm
70cm × 100cm
42cm × 57cm
50cm × 70cm
特别常见的是 50cm × 70cm 
8开 376mm x 265mm 　　　　
4开 540mm x 380mm 　　
标准尺寸：400mm x 285mm x 80mm
标准尺寸：185mm x 260mm 210mm x 285mm
小号：220×110mm 中号：230×158mm
大号：320×228mm D1：220×110mm
C6：114×162mm
桌旗：210×140mm (与桌面成75度夹角) 
竖旗：750×1500mm
大企业司旗：1440×960mm 960×640mm (中小型) 
大号：110×80mm
小号：20×20
横版：90mm×54mm (最常用)
横版：90*55mm 85*54mm 　　
竖版：50*90mm 54*85mm 　　
方版：90*90mm 90*95mm 　　　　
IC卡：85 × 54MM
盘面120mm  120 mm
盘心一般是46mm
盒面也是120mm 120 mm
盒底 152mm  118mm　
展板(KT板)标准尺寸为 90cm × 240cm 或者 120cm × 240cm，平分为两块，就成为 90cm × 120cm 或者 120cm × 120cm 的大小，这就是所谓的标准板。对半分开的标准板形成的尺寸(如90cm×60cm，或者120cm×60cm)都创意空间是标准大小。
X展架尺寸(宽×高)：
60×160cm 
80×180cm 
120×200cm 
27×42cm(台式的)
X展架和易拉宝是不同的东西，易拉宝要比X展架大而且牢固。区别在于X形展架画布后面有个X形的架，相对牢固，而且架子以后也可以用，成本比易拉宝高。
易拉宝尺寸(宽×高)： 
60cm×160cm
80cm×200cm
85cm×200cm
90cm×200cm
100cm×200cm
120cm×200cm
150cm×200cm
易拉宝常用尺寸是80cm×200cm 画面一般是78cm×200cm

PhotoShop画布自动适应图像的尺寸大小？

困扰很久，感谢百度用户“季末杀手”的帮助。问题如下：

图像剪切后比画布小多了，用调整画布大小的形式输入数据太慢，有次见人一下就把画布自动调到图像的尺寸了。如图

在贴吧问了，有了答案这里留一下：把背景透明然后在菜单处点“图像 →裁切”

选择“透明像素”

确定即可。如果常用的话，可以录制一个动作，设置快捷键就方便了。

前言
之前记录过canvas常用的api的含义这些理论知识

下面通过几个实战🌰来加深对canvas的理解和使用

（以下代码都是基于vue3的，顺道一起学习，一举两得😁）
css和js都可以控制画布大小的改变，但是css里只是让画布像图片一样缩放，内部的像素大小是不变的。直接在html标签中设置width和height属性或者使用JavaScript也可以改变画布的尺寸，这个时候就不是缩放画布了，而是真正的改变了画布内的像素大小。
🌰 例子 🌰
改变canvas大小，画布会变空白的原因
如下图：canvas绘制hello world后，点击按钮改变canvas高度，引起画布重绘，画布内容会丢失


代码如下（vue3代码）：
<template>
<div>
  <div class="change-size">
    <p>动态改变canvas大小</p>
    <span>例如: 点击按钮2秒后，改变canvas高度，会引起canvas的重新加载，导致已经绘制好的内容丢失</span>
    <br />
    <button class="my-btn" @click="changeSize">改变canvas高度</button>
    <canvas id="text" width="600" :height="tHeight" style="background: #ececec"></canvas>
  </div>
  
</div>
</template>

<script>
import { ref } from 'vue';
export default {
  name: 'BlurSolution',
  setup() {
    const tHeight = ref(300);
    const changeSize = () => {
      setTimeout(() => {
        tHeight.value = 250;
      }, 2000)
    }
    return {
      tHeight,
      changeSize
    }
  }
}
</script>

<style lang="scss">
.my-btn {
  border: 1px solid #dfdfdf;
  border-radius: 4px;
  padding: 4px 8px;
  margin: 8px 0;
}
</style>

解决办法
利用上面复习到的getImageData和putImageData方法，改变画布前先获取画布内容，改变大小后，再复原。
<template>
<div>
  <div class="change-size">
    <p>动态改变canvas大小</p>
    <span>例如: 点击按钮2秒后，改变canvas高度，会引起canvas的重新加载，导致已经绘制好的内容丢失</span>
    <br />
    <button class="my-btn" @click="changeSize">{{btnText}}</button>
    <canvas id="text" width="600" :height="tHeight" style="background: #ececec"></canvas>
  </div>
  
</div>
</template>

<script>
import {
  onMounted,
  nextTick,
  ref
} from 'vue';

export default {
  name: 'ChangeSize',
  setup() {
    const tHeight = ref(300),
          btnText = ref('改变canvas高度');

    let timeOut = 3000, canvasCtx = null;;

    onMounted(() => {
      nextTick(() => {
        canvasCtx = document.querySelector('#text').getContext('2d');
        drawText();
      })
    });
      重点来了  //
    const changeSize = () => {
      // 获取画布像素数据
      const data = canvasCtx.getImageData(0, 0, 600, 300);
      btnText.value = `${timeOut / 1000}s后canvas高度改变`;
      const loop = setInterval(() => {
        console.log(timeOut)
        if (timeOut > 0) {
          timeOut -= 1000;
          btnText.value = `${timeOut / 1000}s后canvas高度改变`;
        } else {
          btnText.value = '改变canvas高度';
          clearInterval(loop);
          tHeight.value = 200;
          // 延时操作，为了确保画布已经重新加载
          setTimeout(() => {canvasCtx.putImageData(data, 0, 0)}, 0);
        }
      }, 1000);
    }
    const drawText = () => {
      canvasCtx.fillStyle = 'red';
      canvasCtx.font = '28px sans-serif'
      let x = 20,
        y = 100;
      const string = 'HELLO WORLD !';
      canvasCtx.fillText(string, x, y);
      canvasCtx.save();
    }

    return {
      tHeight,
      btnText,
      changeSize
    }
  }
}
</script>

✨✨✨✨在项目中实际遇到的情况是这样的✨✨✨✨
合成视频时有个时间轴，默认展示3分钟长的时间轴，当选择的视频素材总长超过3分钟时，时间轴自动延长到5分钟。
我想到的实现方法有两种：

一种是改变canvas宽度后，画布变空白后，重新绘制一个5分钟的时间轴
另一种是一开始就绘制一个5分钟的时间轴，通过父级元素宽度的改变来控制展示出的时间轴长度。

在绘制时间轴的时候也有遇到问题，关于canvas绘制文本和线条模糊的现象

<canvas>为画布组件，默认尺寸宽度300px 高度225px，常用属性：



ps：同一页面的canvas-id不可重复，若使用一个已经出现过的canvas-id，它对应的画布将被隐藏且不再正常工作

<canvas>组件声明后，一个简单的画图工作分为以下步骤：

声明画布上下文(CanvasContext)
	
使用画布上下文进行绘图描述
	
画图
ps：以上步骤须将代码写进js文件的onLoad()函数中

示例：(简单应用，更多用法见后面)

<!--wxml-->
<view class="title">画布组件canvas的简单应用</view>
<view class="demo-box">
  <canvas canvas-id="myCanvas" style="border:1rpx solid"></canvas>
</view>

//js
Page({
  onLoad:function(options){
    //创建画布上下文
    const ctx = wx.createCanvasContext("myCanvas")
    //设置填充颜色、填充区域
    ctx.setFillStyle('orange')
    ctx.fillRect(20,20,150,80)
    //画图
    ctx.draw()
  }
})