[置顶] 对canvas的简单解释

时间:2023-01-10 20:17:09
HTML5 是一个新兴标准,而较之HTML4,canvas则是新增的一个元素,主要用在web图形方面。(如果你懂photoshop,对接下来我讲解的就非常容易理解
本质上:canvas 元素相当于一个白板(就如ps中的一个画布),直到您在它上面 “绘制” 一些可视内容。与拥有各种画笔的艺术家不同,您可以使用不同的方法在 canvas 上作画。您甚至可以在 canvas 上创建并操作动画,这不是使用画笔和油彩所能够实现的。(具体使用之后介绍)你可以在上面建立圆形,矩形,线条,渐变,填充等其他的和ps中的功能基本雷同。
功能上:canvas 元素从简单地创建图形元素--到--高级 JavaScript 交互(动画的关键),都可以使用到,比如图形的预处理,比如刮奖效果也可以,或者在画布上随心所欲的用鼠标绘图,或者截图什么的等等功能(网上都能找到相应的代码,不做过多解释)。
性能上:确定哪些浏览器支持 HTML5 和一个移动目标达到什么程度。在本文撰写之时,Google Chrome、Apple Safari 和 Mozilla Firefox 都支持大多数新的 HTML5 元素,它们都支持 canvas 元素。Internet Explorer 7 和 8 都不支持 HTML5;Internet Explorer 9 处于测试阶段,支持 HTML5,但还有一些问题。 在此期间,有一个针对不支持 HTML5 的 Internet Explorer 版本的补丁可用。这个补丁的前提是创建使用 JavaScript 代码的元素。例如,可以使用代码段 document.createElement_x('canvas') 创建一个可识别的 Canvas 标记;但是,这并不意味着有东西经过元素本身 。一个流行的解决方法是包含一个完整的基于 canvas 的 JavaScript 库,这个库由 Google 提供,称为 ExplorerCanvas— 或简称 excanvas。下载并将其作为一个外部文件引用,如下所示。(参见 参考资料 中的链接,了解更多 excanvas 信息。) <!--[if IE]>   &ltscript type="text/javascript" src="excanvas.js"></script> <![endif]--> 通过包含 excanvas,您向 Internet Explorer 提供 canvas 及其大多数方法。

个人的一些通俗理解:就像我之前说的只要懂ps,那就基本懂canvas的使用,相当于用canvas可以创建一个画布,然后我们在上面可以创建一个一个的图层;一个canvas元素相当与一个画布,可以不用重复创建,就在上面进行很多次的图形绘制,修改,叠加之类的。而创建第二个canvas元素,相当与你独立的又创建了一张画布,你可以理解成一张图片,可以用到第一个画布中去。用定位什么都可以。在使用canvas的时候对该元素的定位地址一定要准,你用mouse或者touch事件去控制画布时,要注意触点的位置,用pageX,pageY,offsetTop等等方法去准确定位。;当然图层有先后即上下关系,canvas中也存在方法globalCompositeOperation = 'lighter'等等之类(具体代码,网上查找能找到)。其实canvas不是很难,新手多看几次,多用几次就能慢慢懂了。(一定要自己动手实践,光看没用)