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

时间：2023-02-07 23:19:50

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 是个不错的方案，这样使得在脚本中应用更加方便。

获取渲染上下文
　　使用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

转自：http://www.cnblogs.com/dxy1982/archive/2012/02/22/2359192.html

标签：

相关文章