本文通过一个完整的 HTML 和 JavaScript 示例，演示如何使用 Canvas 元素加载外部图片并将其绘制到画布上。代码涵盖了基本的样式设置、图片对象创建、加载事件监听以及使用 drawImage 方法进行渲染的关键步骤，适合初学者参考学习。
JavaScript Canvas 加载图片示例
本文分享了一个使用 JavaScript 在 Canvas 中加载图片的具体代码示例，供读者参考。
具体实现代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Using image</title>
<style type="text/css">
* {
/* margin: 0;
padding: 0; */
box-sizing: border-box;
}
canvas {
border-width: 1px;
border-color: #000000;
border-style: solid;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div>
<input type="file" accept="image/*" />
</div>
<script type="text/javascript">
window.onload = (event) => {
main()
}
function main() {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const inputFile = document.querySelector("input[type=file]");
inputFile.onchange = (event) => {
const files = event.target.files;
if (files.length > 0) {
const file = files[0]; // First file
console.log(file);
const image = new Image();
image.src = URL.createObjectURL(file);
image.onload = function(event) {
// console.log(event, this);
URL.revokeObjectURL(this.src);
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0);
}
}
}
}
</script>
</body>
</html>相关参考链接：
以上就是本文的全部内容，希望能为读者的学习提供帮助，同时也欢迎大家继续支持本站。