HTML DOM drawImage() ·½·¨

¶¨ÒåºÍÓ÷¨

drawImage() ·½·¨»æÖÆÒ»·ùͼÏñ¡£

Óï·¨

drawImage(image, x, y)
drawImage(image, x, y, width, height)
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,
          destX, destY, destWidth, destHeight)

²ÎÊý

²ÎÊý ÃèÊö
image

ËùÒª»æÖƵÄͼÏñ¡£

Õâ±ØÐëÊDZíʾ <img> ±ê¼Ç»òÕ߯ÁÄ»ÍâͼÏñµÄ Image ¶ÔÏ󣬻òÕßÊÇ Canvas ÔªËØ¡£

x, y Òª»æÖƵÄͼÏñµÄ×óÉϽǵÄλÖá£
width, height ͼÏñËùÓ¦¸Ã»æÖƵijߴ硣ָ¶¨ÕâЩ²ÎÊýʹµÃͼÏñ¿ÉÒÔËõ·Å¡£
sourceX, sourceY ͼÏñ½«Òª±»»æÖƵÄÇøÓòµÄ×óÉϽǡ£ÕâЩÕûÊý²ÎÊýÓÃͼÏñÏñËØÀ´¶ÈÁ¿¡£
sourceWidth, sourceHeight ͼÏñËùÒª»æÖÆÇøÓòµÄ´óС£¬ÓÃͼÏñÏñËØ±íʾ¡£
destX, destY ËùÒª»æÖƵÄͼÏñÇøÓòµÄ×óÉϽǵĻ­²¼×ø±ê¡£
destWidth, destHeight ͼÏñÇøÓòËùÒª»æÖƵĻ­²¼´óС¡£

ÃèÊö

drawImage() ·½·¨ÓÐ 3 ¸ö±äÐΡ£µÚÒ»¸ö±äÐΰÑÕû¸öͼÏñ¸´ÖƵ½»­²¼£¬½«Æä·ÅÖõ½Ö¸¶¨µãµÄ×óÉϽǣ¬²¢ÇÒ½«Ã¿¸öͼÏñÏñËØÓ³Éä³É»­²¼×ø±êϵͳµÄÒ»¸öµ¥Ôª¡£µÚ¶þ¸ö±äÐÎÒ²°ÑÕû¸öͼÏñ¸´ÖƵ½»­²¼£¬µ«ÊÇÔÊÐíÄúÓû­²¼µ¥Î»À´Ö¸¶¨ÏëÒªµÄͼÏñµÄ¿í¶ÈºÍ¸ß¶È¡£µÚÈý¸ö±äÐÎÔòÊÇÍêȫͨÓõģ¬ËüÔÊÐíÄúÖ¸¶¨Í¼ÏñµÄÈκξØÐÎÇøÓò²¢¸´ÖÆËü£¬¶Ô»­²¼ÖеÄÈκÎλÖö¼¿É½øÐÐÈκεÄËõ·Å¡£

´«µÝ¸ø drawImage() ·½·¨µÄͼÏñ±ØÐëÊÇ Image ¶ÔÏó»ò Canvas ÔªËØ¡£Ò»¸ö Image ¶ÔÏóÄܹ»±íʾÎĵµÖеÄÒ»¸ö <img> ±ê¼Ç»òÕßʹÓà Image() ¹¹Ô캯ÊýËù´´½¨µÄÒ»¸öÆÁÄ»ÍâͼÏñ¡£

²ÎÔÄ

Image

VUE