Canvas释义
···
Canvas 是 HTML5 新增的元素,用于在网页上绘制图形,它由 Apple 在 Safari 1.3 Web 浏览器中引入,之所以对 HTML 扩展的原因在于, HTML 在 Safari 中的绘图能力能为 Mac OS X 桌面的 Dashboard 组件所使用,并且 Apple 也希望有一种方式可以在 Dashboard 中支持脚本化的图形。Firefox 1.5 和 Opera 9 这两个浏览器也紧随 Safari 的引领,开始支持 Canvas 。
现在, Canvas 标签已经是 HTML5 最伟大的改进之一,因为它可以让我们在不使用图片的情况下实现网页的图形设计。它就像一块画布,本身没有绘制能力,但却把绘制 API 展现给客户端 JavaScript,我们借助 JavaScript 的支持,在画布范围内尽情发挥,达到想要的效果。
技术选型
这个功能无论是 Canvas、 SVG 或是 Flash,都可以实现,但是我们为什么选择了 Canvas 呢?
首先,由于功能上我们需要支持移动平台,所以 Flash我们就可以直接弃掉,它在移动端方面并没有得到友好的支持,但 Canvas 和 SVG 都具有很好的跨平台能力,我们如何抉择,下面我们来对比一下。
—— Canvas 基于像素,提供 2D 绘制函数,提供的功能更原始,适合像素处理、动态渲染和大数据量绘制,
可控性高,绘制完了基本不记录过程,绘图性能会更好一点,各大厂商也早都实现了canvas的硬件加速机制。
—— SVG 为矢量,提供一系列图形元素,功能更完善,建立了一大堆可交互对象,本性长于交互,但性能
会弱些,更适合静态图片展示,高保真文档查看和打印的应用场景。
两者各有自己的擅长领域, 基于以上,我们选择了 Canvas 来实现签字功能。
`
下面,我们来看一下实现效果。
了解了 Canvas 来源、技术选型和最终呈现效果,接下来、我们会从创建、绘制、监听、重绘、图片处理等五部分进行撰写,让我们一起走进 Canvas 绘制的世界。
创建画布
首先,我们需要判断浏览器是否支持 Canvas :
isCanvasSupported = (): boolean => {
let elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
然后根据判断结果选择创建 Canvas 画布还是展示提示
{
isCanvasSupported ?
<canvas ref={
canvas => (this.canvas = canvas)} height={
canvasHeight} width={
canvasWidth}></canvas>
: <p>对不起,当前浏览器暂不支持此功能!