HTML5 Canvas 绘制图片的完整实现示例

作者：流萤时间：2026-10-22 07:58:31浏览：190

本文提供使用 HTML5 Canvas 绘制图片的完整代码示例。通过 JavaScript 获取 Canvas 上下文，加载 Image 对象并在 onload 事件中调用 drawImage 方法，指定坐标与尺寸将图片渲染至画布。包含 demo.js 与 demo.html 源码及运行效果展示，适用于前端初学者参考学习。

HTML5 Canvas 绘制图片实现

本文通过具体代码实例，介绍如何在 HTML5 Canvas 中绘制图片，供读者参考学习。

核心逻辑封装在 demo.js 文件中。


window.onload=function() {
  createcanvas();
 
  drawImage();
}
 function createcanvas() {
   var CANVAS=document.getElementById('mycanvas');
   context=CANVAS.getContext('2d');
 }
 
function drawImage() {
  var img=new Image();
  img.onload=function() {
    context.drawImage(img,0,0,200,200 );
  }
  img.src="img5.jpg";
}

页面结构由 demo.html 文件定义。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>canvas</title>
 
  <script type="text/javascript" src="demo.js"></script>
</head>
<body>
  <canvas id="mycanvas"  width="400" hight="400" >
<span>你的浏览器不支持canvas</span>
</canvas>
 
</body>
</html>

展示原始图片素材。

HTML5 Canvas 绘制图片实现

展示 Canvas 绘制后的最终效果。

HTML5 Canvas 绘制图片实现

希望上述内容能帮助读者掌握 Canvas 绘图技巧，欢迎继续支持本站获取更多技术分享。

作者最新文章

JavaScript将图片转换为Base64编码的两种途径

2026-11-05 16:43:05

怎么在 Vue 或 React 项目中正确集成 animate.js

2026-11-05 10:23:38

JS注册事件：addEventListener基础语法与参数详解

2026-11-05 08:44:56

JSP和JS的区别：运行环境与服务端/客户端职责解析

2026-11-04 23:34:36

pdf.js 官方下载地址：GitHub Release 获取预编译包

2026-11-04 23:07:27