HTML5 canvas中如何绘制图像

互联网 18-12-1

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();

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中如何绘制图像的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： HTML5 canvas