Canvas高级内容

最新推荐文章于 2024-04-03 08:56:50 发布

原创最新推荐文章于 2024-04-03 08:56:50 发布 · 380 阅读

1 ·

CC 4.0 BY-SA版权

canvas 专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨Canvas的高级特性，包括阴影设置、透明度控制、复合操作、剪辑区域的运用，以及路径方向和剪纸效果的实现。同时，介绍了常用的Canvas函数如clearRect和isPointInPath，并讲解了如何在Canvas上使用其他控件，以及现代浏览器的Canvas兼容情况。

Canvas高级内容

阴影
- context.shadowColor
- context.shadowOffsetX
- context.shadowOffsetY
- context.shadowBlur
globalAlpha和globleCompositeOperation
- context.globalAlpha=1（default） //透明度
- context.globalCompositeOperation="source-over" （default）
  - source-over取值，后绘制的图形会覆盖前绘制的图形
  - destination-over取值，前绘制的图形会覆盖后绘制的图形
  - source-over取值
  - source-atop
  - source-in
  - source-out
  - destination-over、destination-atop、destination-in、destination-out相反
  - lighter（颜色重合）
  - copy（只复制最后一个图形）
  - xor（亦或操作，重合部分去掉）
剪辑区域
- context.clip()
  使用刚才的绘制路径，对之前画布进行剪取
路径方向，剪纸效果
- 非零环绕原则
  
  从图形内部向外部引射线，经过的线条方向一个为+1，一个为-1，如果存在加起来结果为零的射线，那么该射线起点所在区域一定在该封闭图形的外面
常用函数补充
- clearRect（）
  - context.clearRect( x , y , width , height ) //清空一片区域并进行一次重绘
- isPointInPath（）
  根据当前路径，判断一个点是否在这个路径所围的区域中
  - context.isPointInPath( x , y ) ;
- canvas当然可以使用JavaScript的原生方法
  - addEventListener（）事件监听
  - getBoundingClientRect（）获取当前鼠标所在矩形
在Canvas上使用其他控件
- 使用CSS布局等方法使得这些控件覆盖到Canvas上
Canvas标准
- W3C的标准： http://www.w3.org/TR/2dcontext/
- WHATWG的标准： http://html.spec.whatwg.org/
扩展canvas上下文环境
- CanvasRenderingContext2D.prototype.someMet=function(){}; //新建的someMet的API
现代浏览器对Canvas兼容都很好
Canvas图形库
- canvasplus http://code.google.com/p/canvasplus
- Artisan JS http://artisanjs.com/
  API很全，很丰富
- Rgraph http://roopons.com.au/wp-content/plugins/viraloptins/js/rgraph/
  绘制各种图表