您现在的位置是：网站首页> 编程资料编程资料

HTML5使用drawImage()方法绘制图像html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法

2021-08-31 1174人已围观

简介这篇文章主要介绍了HTML5使用drawImage()方法绘制图像，绘图环境提供了该方法的三个不同版本，可以根据需求选择，另附原图素材

一、绘制图像

使用drawImage()方法绘制图像。绘图环境提供了该方法的三个不同版本。
drawImage(image,x,y) ：在canvas中(x,y)处绘制图片。
drawImage(image,x,y,width,height) ：在canvas中(x,y)处绘制图片，并将其缩放到指定的宽度和高度。
drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,width,height) ：从图片中切割出一个矩形区域(sourceX,sourceY,sourceWidth,sourceHeight)，缩放到指定的宽度和高度，并在canvas中(x,y)绘制出来。

二、标签

绘制图片前，还需要将图片加载到浏览器中。这里我们仅仅在canvas标签后面添加一个标签。