HTML5 Canvas绘图详解 drawImage() 方法

wanglu1209 发布于2019-08-26 13:37 / 470人阅读

摘要：最常见的在上画图的方法是使用对象。在下面的所有例子中，图片源将会使用这张尺寸的图片。图像的位置是相对于其左上角来判断的。代码如下图片裁剪方法的功用是对图像进行裁剪。代码如下这些就是中的画布标记里进行绘图和处理图像的基本操作。

简介
是一个新的HTML元素，这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。

1、最常见的在canvas上画图的方法是使用Image对象。所支持的来源图片格式依赖于浏览器的支持，然而，一些典型的图片格式(png，jpg，gif等)基本上都没有问题。
2、在下面的所有例子中，图片源将会使用这张200×200尺寸的图片。

3、绘制图片：在最基本的画图操作中，你需要的只是希望图像出现处的位置(x和y坐标)。图像的位置是相对于其左上角来判断的。使用这种方法，图像可以简单的以其原尺寸被画在画布上。
4、代码如下：

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50);

5、图片变形：改变图像的尺寸，你需要使用重载的drawImage函数，提供给它希望的宽度和高度参数。
6、代码如下：

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50,100,100);

7、图片裁剪:drawImage方法的功用是对图像进行裁剪。drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth, destHeight)
8、参数很多，但基本上你可以把它想成从原图中取出一个矩形区域，然后把它画到画布上目标区域里。
9、代码如下：
var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,0,0,50,50,25,25,100,100);

cxt.drawImage(img,125,125,100,100,125,125,150,150);

10、这些就是HTML5中的canvas(画布)标记里进行绘图和处理图像的基本操作。

服务器托管云服务器 HTML5 Canvas html5的canvas html5Canvas 网上绘图 html5

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109200.html

HTML5 Canvas绘图详解 drawImage() 方法

摘要：最常见的在上画图的方法是使用对象。在下面的所有例子中，图片源将会使用这张尺寸的图片。图像的位置是相对于其左上角来判断的。代码如下图片裁剪方法的功用是对图像进行裁剪。代码如下这些就是中的画布标记里进行绘图和处理图像的基本操作。简介是一个新的HTML元素，这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动...

pingink 2019-08-05 18:13 评论0 收藏0
浅尝HTML5之canvas

摘要：新标签新引入，，，，和，等标签标签用于标识页面上的重要内容部分。标签表示元素内容之外的与内容相关的辅助信息。属性值必须是介于完全透明与不透明之间的数字。参数指定水平缩放因素，而参数指定垂直缩放因素。将缩放图像以适合目标宽度和高度。 HTML5新标签 HTML5新引入header，footer，article，section，aside和nav，audio,datalist,detai...

xbynet 2019-08-02 18:02 评论0 收藏0
HTML5 canvas专栏

摘要：一元素元素绘图的功能是通过其身上的对象表现出来的，该环境变量可以从元素上获取。如果绘图表面大小与元素大小不一致，浏览器会自动对绘图表面进行缩放，使之符合元素大小。一. Canvas元素 Canvas元素绘图的功能是通过其身上的context对象表现出来的，该环境变量可以从Canvas元素上获取。 html: Canvas not supported css: bod...

MudOnTire 2019-08-05 17:52 评论0 收藏0
前端知识点总结——H5

摘要：前端知识点总结新特性新的语义标签增强型表单音频和视频绘图绘图地理定位拖动增强型表单新新的表单元素新特性数据列表本身不可见为提供输入建议列表新特性进度条左右晃动进度条具有指定进度值进度条新特性刻度尺用于标示一个值所值的范围不前端知识点总结——H5 1.html5新特性 (1)新的语义标签 (2)增强型表单* (3)音频和视频 (4)Canvas绘图 (5)SVG绘图 (6)地...

el09xccxy 2019-06-26 17:33 评论0 收藏0
前端知识点总结——H5

摘要：前端知识点总结新特性新的语义标签增强型表单音频和视频绘图绘图地理定位拖动增强型表单新新的表单元素新特性数据列表本身不可见为提供输入建议列表新特性进度条左右晃动进度条具有指定进度值进度条新特性刻度尺用于标示一个值所值的范围不前端知识点总结——H5 1.html5新特性 (1)新的语义标签 (2)增强型表单* (3)音频和视频 (4)Canvas绘图 (5)SVG绘图 (6)地...

用户84 2019-08-05 17:59 评论0 收藏0