请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程 Canvas 查看内容

HTML5 Canvas 绘制图像

2013-10-2 11:55| 发布者: admin| 查看: 2182| 评论: 0

摘要: canvas可以引入图像,它可以用于图片合成或者制作背景等。只要是Gecko支持的图像(如PNG,GIF,JPEG等)都可以引入到canvas中,而且其它的canvas元素也可以作为图像的来源。获取图像的方式我们可以通过document.imag ...

canvas可以引入图像,它可以用于图片合成或者制作背景等。只要是 Gecko 支持的图像(如 PNG,GIF,JPEG等)都可以引入到 canvas 中,而且其它的 canvas 元素也可以作为图像的来源。

 

获取图像的方式

们可以通过 document.images 集合、document.getElementsByTagName(canvasName||imageName) 方法又或者 document.getElementById(canvasId||imageId) 方法来获取页面内的图片。

 

我们可以通过下面简单的方法来创建图片:

var img = new Image();    

img.src = 'myImage.png';

 

我们还可以通过 data: url 方式来引用图像。Data urls 允许用一串 Base64 编码的字符串的方式来定义一个图片。其优点就是图片内容即时可用,无须再到服务器兜一圈。(还有一个优点是,可以将 CSS,JavaScript,HTML 和 图片全部封装在一起,迁移起来十分方便。)缺点就是图像没法缓存,图片大的话内嵌的 url 数据会相当的长:

Var img_src = 

'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';  

一旦获得了源图对象,我们就可以使用 drawImage 方法将它渲染到 canvas 里。drawImage 方法有三种形态,下面是最基础的一种。

drawImage(image, x, y)

其中 image 是 image 或者 canvas 对象,x 和 y 是其在目标 canvas 里的起始坐标。

当脚本执行后,图片开始装载。若调用 drawImage 时,图片没装载完,脚本会等待直至装载完毕。如果不希望这样,可以使用 onload 事件:

var img = new Image();   // Create new Image object  

img.onload = function(){  

  // execute drawImage statements here  

}  

img.src = 'myImage.png'; // Set source path 

如果你只用到一张图片的话,这已经够了。但一旦需要不止一张图片,那就需要更加复杂的处理方法,但图片预装载策略超出本教程的范围,感兴趣的话可以参考JavaScript Image Preloader。

drawImage 示例 1

说明

 

下面一个例子我用一个外部图像作为一线性图的背景。用背景图我们就不需要绘制负责的背景,省下不少代码。这里只用到一个 image 对象,于是就在它的 onload 事件响应函数中触发绘制动作。drawImage 方法将背景图放置在 canvas 的左上角 (0,0) 处。

 

代码

<html>

  <head>

  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 

<!--[if IE]>

<script type="text/javascriptsrc="excanvas.js"></script>

<script type="text/javascriptsrc="excanvas.compiled.js"></script>

<![endif]-->

  

<script type="text/javascript">

 function draw() {

 var ctx =    document.getElementById('canvas').getContext('2d');

 var img = new Image();

 img.onload = function(){

ctx.drawImage(img,0,0);

           ctx.beginPath();

ctx.moveTo(30,96);

           ctx.lineTo(70,66);

    ctx.lineTo(103,76);

    ctx.lineTo(170,15);

           ctx.stroke();

        }

        img.src = '../ren.gif';

 }

    </script>

    <title>测试图像1</title>

  </head>

  <body onload="draw();" > 

      <canvas id="canvas" width="150" height="150">

      </canvas>

  </body>

</html>

 

效果


1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

相关阅读

快讯
发布主题

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2017-11-21 08:55 , Processed in 0.082270 second(s), 26 queries .

返回顶部