Canvas绘图基本用法

Posted 2021-04-29 Web前端精髓

：点上面关注免费学习前端知识！

---

要使用 <canvas> 元素，必须先设置其 width 和 height 属性，指定可以绘图的区域大小。出现在开始和结束标签中的内容是后备信息，如果浏览器不支持 <canvas> 元素，就会显示这些信息。下面就是 <canvas> 元素的例子。

<canvas id=“drawing” width=” 200” height=“200”>A drawing of something.</canvas>

与其他元素一样， <canvas> 元素对应的DOM元素对象也有 width 和 height 属性，可以随意修改。而且，也能通过CSS为该元素添加样式，如果不添加任何样式或者不绘制任何图形，在页面中是看不到该元素的。

要在这块画布（canvas）上绘图，需要取得绘图上下文。而取得绘图上下文对象的引用，需要调用getContext() 方法并传入上下文的名字。传入 “2d” ，就可以取得2D上下文对象。

var drawing = document.getElementById(“drawing”);

//确定浏览器支持<canvas>元素

if (drawing.getContext){

    var context = drawing.getContext(“2d”);

    //更多代码

}

在使用 <canvas> 元素之前，首先要检测 getContext() 方法是否存在，这一步非常重要。有些浏览器会为html规范之外的元素创建默认的HTML元素对象。在这种情况下，即使 drawing 变量中保存着一个有效的元素引用，也检测不到 getContext() 方法。

使用 toDataURL() 方法，可以导出在 <canvas> 元素上绘制的图像。这个方法接受一个参数，即图像的MIME类型格式，而且适合用于创建图像的任何上下文。比如，要取得画布中的一幅PNG格式的图像，可以使用以下代码。

var drawing = document.getElementById(“drawing”);

//确定浏览器支持<canvas>元素

if (drawing.getContext){

    //取得图像的数据URI

    var imgURI = drawing.toDataURL(“image/png”);

    //显示图像

    var image = document.createElement(“img”);

i    mage.src = imgURI;

    document.body.appendChild(image);

}

默认情况下，浏览器会将图像编码为PNG格式（除非另行指定）。Firefox和Opera也支持基于 “image/jpeg” 参数的JPEG编码格式。由于这个方法是后来才追加的，所以支持 <canvas> 的浏览器也是在较新的版本中才加入了对它的支持，比如IE9、Firefox 3.5和Opera 10。

完

看前端技术文章，就在Web前端精髓