meface/docs/article/visual/canvas_advance.md

title	date	author	tags	categories
Canvas图片	2021-04-30	ac	Canvas	可视化

Canvas 加载图片

用于动态的图像合成或者作为图形的背景，以及游戏界面等 操作图片的步骤：

1. 获得需要绘制的图片，图片源的类型：

   • HTMLImageElement对象，由Image()方法创建，或任何的<img>元素
   • HTMLVideoElement对象，用一个HTML的<video>元素作为你的图片源，可以从视频中抓取当前帧作为一个图像
   • HTMLCanvasElement对象，可以使用另一个 <canvas> 元素作为你的图片源。
   • ImageBitmap对象，这是一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源中生成。

2. 使用drawImage()方法将图片绘制到画布上

   • drawImage(image,x,y)：x,y为图像在canvas里的起始坐标
   • drawImage(image, x, y, width, height)：width和height用来控制图片在canvas中缩放的大小
   • drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

window.onload = init;
function init(){
    var ctx = document.getElementById("canvas").getContext("2d");
    var img = new Image();
    img.src = "./images/bg.jpg";
    //使用 data:url的方式嵌入图片
    // img.src = "data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";
    img.onload = function(){
        //执行drawImage
        ctx.drawImage(img,0,0,600,450);
    }
}