HTML5系列代码：使用三种方法插入图像

drawImage() 方法在画布上绘制图像、画布或视频。
drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>使用三种方法插入图像</title>
<style type="text/css">
canvas{border:1px solid #000;
}
</style>
<script type="text/javascript">
function Draw(){var canvas=document.getElementById("canvas");        // 获取canvas对象var context = canvas.getContext("2d");              // 获取2d上下文绘图对象var newImg = new Image();                        // 使用Image()构造函数创建图像对象newImg.src= "../images/Chaplin.jpg";                   // 指定图像的文件地址newImg.onload=function(){context.drawImage(newImg,0,0);                // 从左上角开始绘制图像context.drawImage(newImg,250,100,150,200);     // 从指定坐标开始绘制图像，并设置图像宽和高context.drawImage(newImg,90,80,100,100,0,0,120,120);  // 裁剪一部分图像放在左上角，并稍微放大}
}
window.addEventListener("load",Draw,true);
</script>
</head>
<body style="overflow:hidden">
<canvas id="canvas" width="400" height="300">你的浏览器不支持该功能！</canvas>
</body>
</html>

HTML5系列代码：使用三种方法插入图像相关推荐

Eclipse远程调试Java代码的三种方法
Eclipse远程调试Java代码的三种方法, 第1种方法是用来调试已经启动的Java程序,Eclipse可以随时连接到远程Java程序进行调试, 第2种方法可以调试Java程序启动过程,但是Ecli ...
eclipse 远程调试java_Eclipse远程调试Java代码的三种方法
Eclipse远程调试Java代码的三种方法, 第1种方法是用来调试已经启动的Java程序,Eclipse可以随时连接到远程Java程序进行调试, 第2种方法可以调试Java程序启动过程,但是Ecli ...
pca算法python代码_三种方法实现PCA算法（Python）
主成分分析,即Principal Component Analysis(PCA),是多元统计中的重要内容,也广泛应用于机器学习和其它领域.它的主要作用是对高维数据进行降维.PCA把原先的n个特征用数目 ...
SQL Server在存储过程中编写事务处理代码的三种方法
SQL Server中数据库事务处理是相当有用的,鉴于很多SQL初学者编写的事务处理代码存往往存在漏洞,本文我们介绍了三种不同的方法,举例说明了如何在存储过程事务处理中编写正确的代码.希望能够对您有所 ...
向其他进程注入代码的三种方法
如何向其他线程的地址空间中注入代码并在这个线程的上下文中执行之? 目录: ●导言 ●Windows 钩子(Hooks) ●CreateRemoteThread 和LoadLibrary 技术 ○进程间 ...
PHP中添加HTML代码的三种方法（printEND）
php中添加HTML代码,就是php类型的文件中添加html代码~ 第一种是在HTML中加PHP. 大段大段的html代码中,在各个需要执行php的地方<?php .... ?> 比如 l ...
php嵌入html代码的三种方法
php中添加HTML代码,就是php类型的文件中添加html代码~ 第一种是在HTML中加PHP. 大段大段的html代码中,在各个需要执行php的地方<?php .... ?> 比如 l ...
在Maple 9中察看内置函数的原代码的三种方法
Matlab中非常好的功能是edit [内置命令]可以直接察看所有内置命令的源代码,这样对于学习Matlab语言是极为丰富的资料.其实Maple中也有类似功能,也许使用不是非常明显,所以国内几乎没有任 ...
html清除图片上下间距,css - 三种方法解决LI和内部Img的上下间距问题
在火狐浏览器和谷歌浏览器(qq浏览器,谷歌内核)bug类似这张图: img的高度是190*127 但是放到li中,li并没有设置高度,却和内部的图片之间上下错位. 若强行给li设置高度127,他和im ...

HTML5系列代码：使用三种方法插入图像

HTML5系列代码：使用三种方法插入图像相关推荐

最新文章

热门文章