canvas是html5中新增的画布，那么html5 canvas如何绘制图像呢？本篇文章就来给大家介绍关于html5 canvas绘制图像的方法，下面我们来看具体的内容。
我们先来直接看代码示例
<!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中如何绘制图像的详细内容。