Javascript高级编程学习笔记（84）—— Canvas(1)基本用法

Canvas绘图

Canvas自HTML5引入后,由于其炫酷的效果成为HTML5新增功能中最受欢迎的部分

Canvas元素通过在页面中设定一个区域,然后就可以使用JS在其中绘制图形

<canvas>元素最早是由苹果公司推出,主要是在 Dashboard 插件中使用,后来该元素被HTML5引入,然后得到主流浏览器的广泛支持

canvas除了具备绘制 2D 上下文的能力之外,还通过 WEBGL 提供了绘制3D上下文的能力

虽然浏览器对该功能的支持日益完善,但是需要注意的是一些老版本的操作系统由于缺少必备绘图驱动(如XP)所以仍旧无法使用

基本用法

使用<canvas> 首先需要设置其 width 和 height 属性,用于指定绘图区域的大小

而<canvas>标签内的内容作为浏览器不支持 canvas 的后备信息显示

<canvas id="drawing" width="200" height="200">浏览器不支持canvas </canvas>

当浏览器不支持canvas时就会显示标签中的提示文字

此外,与其他元素一样<canvas>元素的DOM对象也有 width 和 height 属性,可以修改

并且也能通过 CSS 为该元素添加样式,如果不添加样式也不绘制图形在页面中是无法看到该元素的

要在 <canvas> 中绘图第一步需要取得绘图上下文,从而获得对绘图上下文对象的引用

需要调用 getContext() 方法,传入"2d" 作为参数,从而取得 2d上下文对象:

var drawing = getElementById("drawing");

//检测浏览器支持canvas
if(drawing.getContext){
    var context = drawing.getContext();
  // 更多代码  
}

如果希望把 <canvas> 元素上绘制的图形导出为图像,则可以使用 toDataUrl() 方法

该方法接受一个参数,即图像的 MIME 类型格式,例如希望将图像导出为 PNG 可以使用如下代码:

var drawing = getElementById("drawing");

//检测浏览器支持canvas
if(drawing.getContext){
  // 取得图像数据的 URI
  var imgURI = drawing.toDataURL("image/png");
  //  显示图像
  var image = document.createElement("img");
  image.src = imgURI;
  document.body.appendChild(image);        
}

在不传入参数的默认情况下,图片的保存格式为 PNG