html5 Canvas画图教程目录

之前画了一个android版的 股票行情图：需求概述

现在要画一个网页版的 股票行情图，
画图参照网站：【腾讯和新浪做的很好。百度、同花顺 丑】
1、腾讯自选股
2、新浪财经

此页专为我的 html5 Canvas画图系列教程文章 而发，权当作一个目录吧。
此目录随此系列的已发文章同步更新。

html5 Canvas画图教程1：Canvas概述和入门

开始canvas画图前的基础知识

html5 Canvas画图教程2：Canvas画线条 基础

画直线与设置线条的样式，如宽度lineWidth，颜色strokeStyle，端点lineJoin，交汇点lineCap等

html5 Canvas画图3：Canvas画线条 提升

在Canvas画线条中，有一个bug:线条模糊，本章重点讲解：解决办法

html5 Canvas画图4：填充和渐变

在Canvas画图时候，对图进行颜色的变化：填充和渐变

html5 Canvas画图5：画曲线之arc

arc(圆心x,圆心y,半径,开始的角度,结束的角度,是否逆时针)，一个完整的圆 2PI弧度

html5 Canvas画图6：画曲线之arcTo

html5 Canvas画图7：曲线之quadraticCurveTo

html5 Canvas画图8：曲线之bezierCurveTo

html5 canvas画图9：基本图形矩形、圆形

html5 Canvas画图10：圆角矩形

html5 canvas画图11：椭圆形

Html5 Canvas画图教程12：绘制图片

html5 Canvas画图教程13:保存画布状态与还原

便捷的在各个画笔状态间切换

Html5 canvas画图教程14：画面的位移translate，缩放scale，旋转rotate

Html5 canvas画图教程15：画扇形

结合14章的知识来画扇形

Html5 canvas画图教程16:切割clip

让你能以 不规则图形清空画面

Html5 canvas画图教程17:论beginPath的重要性

很简单但新手很容易忽视的问题

Html5 canvas画图教程18:动画原理解析

这是一篇理论文章

Html5 canvas画图教程19:canvas动画与HTML动画效率对比

测试canvas用来做动画的效率是否高能

Html5 canvas画图教程20:在canvas里写字

Html5 canvas画图教程21:阴影shadow

Html5 canvas画图教程22:获取与操作像素信息getImageData

重要,高级场合非用不可

Html5 canvas画图教程23:全局透明度globalAlpha

跟css的opacity有点像

html5 Canvas画图教程24：测量文字尺寸measureText

html5 Canvas画图教程25：图形组合模式globalCompositeOperation

html5 Canvas画图教程26:用transform来实现位移,缩放,旋转等

矩阵,头大

html5 Canvas画图教程27:isPointInPath

交互一般就靠它了

感谢阅览！希望对你有所帮助！你的支持是我的动力！
如有疑问 联系QQ：563084073。

参考文章：http://jo2.org/html5-canvas-tutorial-list/