CanvasImageSource

最新推荐文章于 2022-09-27 18:39:04 发布

Lo-ra

最新推荐文章于 2022-09-27 18:39:04 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/yana_loo/article/details/51645982

版权

CanvasImageSource是一个辅助类型，它不是一个接口，也没有对象实现它，描述下面类型的任何一个对象

HTMLImageElement,HTMLVideoElement,HTMLCanvasElement,CanvasRenderingContext2D或ImageBitmap

Canvas 可以用于动态的图片合成或者作为图形的背景，以及游戏界面（Sprites）等等。

一如图像到canvas里需要两个基本步骤：

1 获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源，也可以通过提供一个URL的方法来使用图片

2 使用drawImage() 函数将图片绘制到画布上。

获得需要绘制的图片

HTMLImageElement 这些图片是由Image()函数构造出来的，或者任何<img>元素

HTMLVideoElement 用于一个HTML的<video>元素作为图片原，可以用于视频中抓取当前帧作为一个图像

HTMLCanvasElement 用于使用另一个<canvas>元素作为图片源

ImageBigmap 这是一个高性能的位图，可以低延迟地绘制，它可以从以上述的所有源作为其它集中源中生成

使用相同页面的图片

· document.images 集合

· document.getElementsByTagName()方法

· doucment.getElementById()

绘制图片

drawImage(image,x,y)

 img.onload = function(){
                ctx.drawImage(img,0,0);
                ctx.lineWidth=5;
                ctx.beginPath();
                ctx.moveTo(100,50);
                ctx.quadraticCurveTo(70,140,170,120);
                ctx.stroke();


                ctx.lineWidth = 1;
                ctx.setLineDash([4,2]);
                ctx.strokeRect(20,8,200,180);
                ctx.beginPath();
                ctx.moveTo(65,110);
                ctx.lineTo(100,110);
                ctx.moveTo(100,140);
                ctx.lineTo(100,110);
                ctx.closePath();
                ctx.stroke();

缩放Scalling

drawImage(image,x,y,width,height)

img.onload = function () {
                for(var i=0; i<6; i++){
                    for(var j=0;j<6;j++){
                        ctx.drawImage(img,j*50,i*50,50,50);
                    }
                }
            }