Canvas 绘制图片(drawImage())
程序员文章站
2022-03-21 13:59:33
...
demo.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas {
border:1px solid red;
}
img {
display: none; /* 隐藏img标签,让图像在canvas画布上显示 */
}
</style>
</head>
<body>
<canvas id="cvs" width="500" height="500"></canvas>
<img src="./imgs/youyouyou.jpg">
<script>
var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');
var img = document.querySelector('img');
/*
* ctx.drawImage()
* 绘制图像，有三种使用方式。
* */
/*
* 第一种，三参数版本：
* 把图像绘制到指定的坐标。
* */
// 必须要在img图像加载完毕之后使用
/*img.onload = function() { //bug: 如果图片是从缓存中加载(比较快),图片加载完后,才会注册加载事件,那么就不会监听到加载事件。 解决:在下方手动为img标签指定src属性的值。
ctx.drawImage( img, 10, 10 );
}*/
//img.src = "..."; //可以保证先注册onload事件,后加载图片。
/*************************************************
* 第二种，五参数版本：
* 把图像绘制到指定的坐标，并指定其大小。
* */
/*img.onload = function() {
ctx.drawImage( img, 10, 10, 200, 200 );
}*/
/**************************************************
* 第三种，九参数版本：
* 把裁剪到的部分图像绘制到指定的坐标，并指定其大小。
* */
img.onload = function() {
ctx.drawImage( img,
300, 100, 400, 400, //裁剪的位置,裁剪大小
10, 10, 200, 200 ); //显示位置,显示大小
}
//img.src = "..."; //可以保证先注册onload事件,后加载图片。
</script>
</body>
</html> 上一篇： QWidget绘制图片
下一篇： 轻松学习C#的抽象类