站长资讯网
最全最丰富的资讯网站

HTML5 canvas中如何绘制图像

canvas是HTML5中新增的画布,那么HTML5 canvas如何绘制图像呢?本篇文章就来给大家介绍关于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文件。结果如下图所示,图像是在画布上绘制的。

HTML5 canvas中如何绘制图像

注意:在以下代码的情况下,不能保证在执行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>

赞(0)
分享到: 更多 (0)
网站地图   沪ICP备18035694号-2    沪公网安备31011702889846号