大白话canvas中drawImage()方法

原创 2024-05-10 16:28:41 1.5k 阅读 AI写同款

bubble21

33粉丝16篇原创

关注

【canvas】canvas基础使用（七）：绘制图像学习canvas如何绘制图片或视频。给定一个图像，一般使用drawImage()方法绘制。Canvas 2D API 中的 CanvasRenderingContext2D.drawImage() 方法提供了多种在画布（Canvas）上绘制图像的方式。语法：指定绘制位置快速绘制： drawImage(image, dx, dy); 指定绘制位置宽高快速绘制： drawImage(image, dx, dy, dWidth, dHeight); 指定图像被绘制区域和绘制区域绘制： drawImage(im 阅读详情

AI摘要

本文详细介绍了HTML5CanvasAPI中的drawImage函数，包括其接受的参数如img、x、y、width、height、sx、sy、sw、sh等的含义，以及如何通过偏移和剪切实现精确的图形绘制和显示。,

API

drawImage(img, x, y)
drawImage(img, x, y, width, height)
drawImage(img, sx, sy, sw, sh,x, y, width, height)

参数

img：操作图形
x、y：用于定位（左上角），就是从哪个点开始绘制。x 是距原点的水平距离 y是距原点的垂直距离
width、height：画多大，宽高
sx、sy：用于定位（左上角），在原图哪个点开始剪切
sw、sh：剪多大，宽高

原点：当前起始点，新建画布后起始是（0,0）偏移100,200后，原点就是(100,200)

绘制：需要四个参数，在哪个点开始绘制(x,y)，绘制多大(width,height)
剪切：需要四个参数，在哪个点开始剪切(sx,sy)，绘制多大(sw,sh)

drawImage(img, 10, 20)
在原点水平偏移10，垂直偏移20，开始绘制图形

drawImage(img, 10, 20, 300, 300)
在原点水平偏移10，垂直偏移20，开始绘制一个300*300的图形

drawImage(img, 1, 2, 150, 150,10, 20, 300, 300)
这里分两步会好理解一点，第一步确定外框大小，第二步确定要显示内容图形的大小
（先确定一个外框）原点水平偏移10，垂直偏移20，开始绘制一个300*300的区域
（框内显示内容）原图形水平偏移1，垂直偏移2的位置开始剪切一个150*150的图形

标签