canvas

原生

1、 canvas的宽高设置：

canvas的本身画布大小是通过canvas标签中的width和height来设置的，如果同时对其css样式进行设置，会对canvas进行缩放；类似把一张图片进行处理，会把canvas标签中的尺寸缩放到css设置的尺寸；所以最好是通过标签属性设置尺寸，不用设置css的尺寸；

2、 canvas宽高改变后，画布上的内容会被清空

这时候我们需要重新绘制画布：使用getImageData将画布内容复制一份，然后在改变尺寸之后使用putImageData方法，将内容放回去；

ctx.getImageData(x,y,width,height);
返回值:imgData:[A.r,A.g,A.b,B.r,B.g,B.b]

var imgData=ctx.createImageData(100,100);
ctx.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

3.canvas加载图片：用public/static中的图片可以成功，用其他地方的会报错，显示找不到图片

`ctx = title.value.getContext('2d');
var image=new Image();
image.src='./static/images/下一步.png';            
image.onload=function(){
    Ctx.drawImage(image,0,0,50,50);
};
`

4.图像合成：两张图片叠加：原理是同一个位置drawImage两次

5.使用canvas将gif变成静图：canvas.toDataURL('image/png')

6.使用 svgManager 对 GIF 图片进行播放和暂停管理。

GIF 播放时显示动态效果，暂停时显示静态第一帧。

<svg
    xmlns="http://www.w3.org/2000/svg"
    preserveAspectRatio="xMidYMid meet"
    style="width: 100%; height: 100%"
    viewBox="0 0 1500 840"
    ref="svgDom"
>
    <image
        x="0"
        y="0"
        width="1500"
        height="840"
        :href="params.imgUrl"
        ref="gifImage"
    ></image>
</svg>

let svgManager = {
    init() {
        let img = new Image(); // 创建一个新的图像对象
        img.src = params.imgUrl; // 设置图像的来源 URL
        this.playUrl = img.src; // 保存 GIF 的播放 URL
        img.onload = () => { // 图片加载完成后执行
            this.canvas = document.createElement("canvas"); // 创建一个 Canvas
            this.ctx = this.canvas.getContext("2d"); // 获取 Canvas 的 2D 上下文
            this.canvas.setAttribute("width", img.width); // 设置 Canvas 宽度为图片宽度
            this.canvas.setAttribute("height", img.height); // 设置 Canvas 高度为图片高度
            this.ctx.drawImage(img, 0, 0); // 将图片绘制到 Canvas 上
            this.stopUrl = this.canvas.toDataURL('image/png'); // 将 Canvas 内容转换为 PNG 格式的 Base64 URL
            this.stop(); // 默认调用 `stop()` 方法，显示静态图片

    },
    play() {
            gifImage.value.setAttribute('href', this.playUrl); 
            // 将 `<image>` 元素的 `href` 设置为 GIF 的播放 URL
     },
   stop() { 
       gifImage.value.setAttribute('href', this.canvas.toDataURL('image/png')); 
       // 将 `<image>` 的 `href` 设置为 PNG 格式的静态图片 URL 
   }
};

onMounted(() => {
    svgManager.init();
    const observer = new ResizeObserver(() => svgSize.update());
    observer.observe(document.querySelector(".container"));
});