我们先来直接看代码示例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('SimpleCanvas');
if (!canvas || !canvas.getContext) {
return false;
}
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function onImageLoad() {
context.drawImage(img, 128, 40);
}
img.src = 'img/flower.jpg';
}
</script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
<canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
<div>Canvas Demo</div>
</body>
</html>
申明：在画布上画图时，猎取画布的上下文是一个罕见的历程。
预备要在画布上绘制的图象。建立一个Image对象。
var img = new Image();
在画布上绘制图象运用Canvas上下文的drawImage（）要领。给出X和Y坐标以将Image对象绘制为第一个参数，将图象绘制为第二个第三个参数，因为加载Image对象的图象是异步处置惩罚的，因而必须在Image对象的图象预备好的情况下绘制图象。因而，我们对Image对象的onload事宜完成画图处置惩罚，末了处置惩罚源图象的设置
img.onload = function onImageLoad() {
context.drawImage(img, 128, 40);
}
img.src = 'img/flower.jpg';
运转效果
在Web浏览器中翻开HTML文件。效果如下图所示，图象是在画布上绘制的。
注重：在以下代码的情况下，不能保证在实行drawImage时读取Image对象的图象。因而，可能在显现图象时发作。绘制图象应该在Image对象的onload上完成。
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('SimpleCanvas');
if (!canvas || !canvas.getContext) {
return false;
}
var context = canvas.getContext('2d');
var img = new Image();
img.src = 'img/flower.jpg';
context.drawImage(img, 128, 40);
}
</script>
以上就是HTML5 canvas中怎样绘制图象的细致内容，更多请关注ki4网别的相干文章！
