HTML5 Canvas API有什么用

这篇文章主要为大家展示了“HTML5 Canvas API有什么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“HTML5 Canvas API有什么用”这篇文章吧。

Canvas是依赖分辨率的位图画布，可以在其上绘制任意图形，甚至加载照片。在HTML5中，定义了一系列标准的Canvas API，用于绘制图形、创建渐变、处理图像，甚至可以针对像素进行处理。

在此，我们先提出两个问题供大家思考。这两个问题是大多数初学者和一些有一定经验的朋友都未必能够准确回答的。请一定仔细思考这两个问题，这是成为Canvas高手的基础问题。

问题1：Canvas是不是透明的？

问题2：Canvas可不可以互相堆叠在一起？

本文仅作为Ganvas API的索引性介绍，详细介绍请查看本站其它文章。

以前的同类解决方案

以前要在浏览器中进行绘图，我们只能使用SVG（Scalable Vector Graphics，可伸缩矢量图形）、Flash或者只支持IE的VML（Vector Markup Language，矢量标记语言）。

这些技术有如下的缺点。

 Flash等插件安装可能失败或者可能被禁用。

 插件的安全问题：第三方插件很可能存在安全问题，导致被攻击。

 插件和Web页面的实现方式不一致，导致与其他Web元素的集成是很大问题。

Canvas 的优点

我们在学习Canvas的时候，可以先了解一些Canvas的优点，为读者建立起一个初步的印象，在以后的实际工程需要时能够准确作出技术选型。

下面是Canvas的主要优点。

 性能好。Canvas的机制决定了不需要将绘制图像里的每个图元当做对象存储，执行性能非常好。

 功能强大。Canvas提供了许多的图像处理API，能轻松地对图片、视频进行编辑和处理。

 兼容性好。目前，所有主流浏览器的最新版本都支持HTML5 Canvas，所以不用考虑浏览器的兼容性。

检测浏览器是否支持Canvas

在本节中，我们给出了两种检测浏览器是否支持Canvas的方法。我们推荐使用第二种方法，结合标签自身的能力作出简洁有效的判断。

 通过原生JavaScript

通过原生JavaScript代码检测浏览器是否支持Canvas的代码如下：

if(!document.createElement('canvas').getContext){

//如果不能建立canvas元素，则执行此处的代码

}

 直接使用canvas标签来判断

直接使用canvas标签检测浏览器是否支持Canvas的代码如下：

<canvas>你的浏览器不支持Canvas</canvas>

如果你的浏览器支持Canvas API，则浏览器将不显示“你的浏览器不支持Canvas”这句话；

而如果你的浏览器不支持Canvas API，则浏览器将显示“你的浏览器不支持Canvas”，而不解释<canvas></canvas>标签。

Canvas 主要操作

本节向读者简要介绍Canvas的一些主要操作方法，比如创建Canvas元素、创建二维上下文、设置Canvas画布大小、绘制画布等。

1. 创建Canvas元素

我们通过如下两种方式来创建Canvas元素。

 通过HTML创建。HTML页面里的代码为：

<canvas id="mycanvas"></canvas>

通过HTML创建后，我们在JavaScript采用如下的方法来获得这个元素：

var canvas = document.getElementById('mycanvas');

 通过JavaScript直接创建。创建代码如下：

var canvas = document.createElement('canvas');

2. 创建二维上下文

使用Canvas，首先要获取其上下文，然后在上下文中执行操作。目前，可选的上下文环境是2D（3D的上下文还未被HTML5标准所正式支持），代码如下：

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

3. 设置Canvas画布大小

设置Canvas画布大小的代码如下：

canvas.width = 600;

canvas.height = 600;

4．绘制画布

一旦我们获取了上下文的引用的话，就可以使用drawImage()方法将其显示在Canvas上，其基本形式如下：

ctx.drawImage(image, x, y);

image指向的是我们的图像或者Canvas对象的引用，x和y指的是将图像放置到画布上的坐标位置。

5. 简单图像处理效果

这里我们只简要介绍了3种图像处理效果，分别为移动、缩放和旋转，其中涉及translate()、scale()和rotate()方法。

 translate(x,y)方法用来移动Canvas的原点到另外一个位置。它接受两个参数，其中x是左右偏移量，y是上下偏移量。

 scale(x,y)方法用来对形状或者图像进行缩小或者放大。它接受两个参数：x、y分别是横轴和纵轴的缩放因子。

 rotate()方法用于以原点为中心旋转 Canvas，它只接受一个参数：旋转的角度。该值是按照顺时针方向计算的，其单位为弧度。

以上是“HTML5 Canvas API有什么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！