突袭HTML5之Canvas 2D入门1 - Canvas绘制文本和图像

时间:2022-11-20 17:04:22

Canvas历史
  canvas是一个新的HTML元素,这个元素可以被脚本语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做动画。canvas最先在苹果公司(Apple)的Mac OS X Dashboard上被引入,而后被应用于Safari。后面被采用成为HTML5标准规范的一部分。这个元素的引入带来了非同凡响的影响:从此,浏览器原生支持图形绘制与动画了。canvas的引入,再加上Audio与Video的支持,HTML5必将带来网页游戏的蓬勃发展。
Canvas基本属性
  canvas只有两个属性,width 和 height,两个都是可选的,并且都可以用DOM或者CSS来设置。如果不指定width和height,默认的值是宽300像素,高150像素。虽然可以通过 CSS 来调整canvas的大小,但渲染图像会通过缩放来适应布局的(如果你发现渲染结果看上去变形了,不必一味依赖CSS,可以尝试显式指定canvas的width和height属性值)。
  除此以外,像id这种标准HTML元素都可以指定的属性,canvas也可以使用。一般,为元素指定id 是个不错的方案,这样使得在脚本中应用更加方便。
  canvas元素可以像普通图片一样指定其样式(边距,边框,背景等等)。然而这些样式并不会对canvas实际生成的图像产生什么影响。如果不指定样式,canvas默认是全透明的。
获取渲染上下文
  使用JS操作canvas的第一步就是获取渲染上下文。
  canvas创建的固定尺寸的绘图画面开放了一个或多个渲染上下文(rendering context),我们可以通过它们来控制要显示的内容。目前支持2D渲染(直接的API支持),3D渲染(通过WebGL实现的)。
  canvas初始是空白的,要在上面用脚本画图首先需要获得渲染上下文,它可以通过 canvas 元素对象的 getContext方法来获取。getContext()接受一个用于描述其类型的值作为参数。目前可用的参数值是"2d",也支持"webgl"(获得WebGL 3D渲染上下文,这个到总结WebGL的时候详细说明)。
  一般我们会辅助以DOM方法getElementById取得canvas对象的DOM节点。然后通过其getContext方法取得其画图操作上下文。如下所示:

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

但是为了安全起见,我们一般需要先判断浏览器是否支持cavas,也就是需要判断getContext是否存在。下面是完整的代码:

var canvas = document.getElementById('lesson01');
if (canvas.getContext){
   var ctx = canvas.getContext('2d');
   //  drawing code here
else {
   //  canvas-unsupported code here
}


绘制文本
  绘制文本需要用到下列的属性和方法:
context.font属性

获取或设置文本的字体和大小。设置该属性的字符串语法与CSS语法中的font是一样的,不能解析成CSS的值会被忽略掉。
context.textAlign属性

获取或设置字体的对其方式。只允许下列值:start, end, left, right, 和center。其他值会被忽略,默认值是start。
context.textBaseline属性

获取或设置字体的基准线。有效的值如下:top, hanging, middle, alphabetic, ideographic, bottom。其他值会被忽略,默认值是alphabetic。

context.fillText(text, x, y [, maxWidth ] )
该方法用于在指定的位置绘制文本。如果设置了maxWidth,则会调整字符串使之符合这个条件。
context . strokeText(text, x, y [, maxWidth ] )
该方法用于在指定的位置绘制镂空的文本。
例子如下:

<!DOCTYPE HTML>  
<html>  
<body>  
<canvas id="lesson" width="300"height="200">      
         <p>Your browser does not support the canvas element!</p>      
</canvas>      
       
<script type="text/javascript">      
  window.onload =  function() {      
          var canvas =document.getElementById("lesson");      
          var context =canvas.getContext("2d");      
              
         context.font ="30px Times New Roman";      
         context.fillText("HelloCanvas!", 10, 35);      
  }      
</script>      
</body>  
</html>  


绘制图片
  绘制图片可以有下面几种方式:
绘制原图:context.drawImage(image, dx, dy)
缩放绘图:context.drawImage(image, dx, dy, dw, dh)
切片绘图:context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
  合理的绘制多幅图像可以做出漂亮的组合效果,比如常见的画廊就是框图片与照片的叠加,只不过要注意绘制的先后顺序。
第一个参数image代表图片的来源,可以是下列几种:
(1)页面内的图片:我们可以通过 document.images 集合、document.getElementsByTagName 方法又或者 document.getElementById 方法来获取页面内的图片。
(2)已经完备的canvas:可以使用document.getElementsByTagName或document.getElementById方法来获取已经准备好的canvas元素。一个常用的场景就是为另一个大的canvas做缩略图。
(3)通过data:url方式(http://en.wikipedia.org/wiki/Data:_URL)嵌入图像:Data urls允许用一串Base64编码的字符串的方式来定义一个图片。其优点就是图片内容即时可用,无须再到服务器兜一圈。(还有一个优点是,可以将CSS,JavaScript,HTML和图片全部封装在一起,迁移起来十分方便。)缺点就是图像没法缓存,图片大的话内嵌的url数据会相当的长。例如:

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

(4)动态创建的图片:我们可以用脚本创建一个新的Image对象,但这种方法的主要缺点是如果不希望脚本因为等待图片装置而暂停,还得需要突破预装载。

var img =  new Image();   
img.src = 'myImage.png'; 

当脚本执行后,图片开始装载。若调用drawImage时,图片没装载完,脚本会等待直至装载完毕。如果不希望这样的效果,则需要使用图片的onload事件。(见下面的例子)

  其他几个参数的含义:sx,sy是Image在源中的起始坐标,sw/sWidth,sh/sHeight是源中图片的宽和高,dx,dy是在目标中的坐标,dw/dWidth,dh/dHeight是目标的宽和高。具体可以参看下图:

突袭HTML5之Canvas 2D入门1 - Canvas绘制文本和图像

例子如下:

<?doctype html>
<html>
<head>
<title>cavas tests</title>
<script type="text/javascript">
  function onStart() {
   var canvas = document.getElementById("lesson01");
   if(canvas.getContext)
  {
    var context = canvas.getContext("2d");
    var pic =  new Image();   
   pic.onload= function(){  
    context.drawImage(pic,0, 0); 
   } 
   pic.src = "http://imgsrc.baidu.com/forum/pic/item/e6b14bc2a4561b1fe4dd3b24.jpg";      
  }
}
</script>
</head>
<body onload="onStart();">
<canvas id="lesson01" width="500" height="500">
 Your browser does not support Canvas.
</canvas>
</body>
</html>

 

实用参考:
官方参考文档以及API详细说明:http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
权威开发入门:https://developer.mozilla.org/cn/Canvas_tutorial