html5画布图片
时间: 2023-09-11 22:12:10 浏览: 52
HTML5的canvas元素提供了很多API,可以在画布上绘制各种图形,包括图片。下面是一个简单的示例代码,演示如何在画布上绘制一张图片:
```
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas绘制图片</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
img.src = "image.jpg";
</script>
</body>
</html>
```
在上面的代码中,我们首先创建了一个Canvas元素和一个Image元素。接着使用Canvas的getContext方法获取Canvas的绘图上下文。当Image加载完成后,我们在Canvas上使用drawImage方法将图片绘制在Canvas上。在该方法中,我们需要提供Image对象和图片的左上角坐标。
其中,img.src指定了图片的URL,可以是相对路径或绝对路径。需要注意的是,在绘制图片之前需要等待图片加载完成,因此我们使用了img.onload函数来监听图片的加载事件,确保图片加载完成后再进行绘制。