html5 Canvas画图系列教程目录

此页专为我的html5 Canvas画图系列教程文章而发,权当作一个目录吧。

虽然我发的 Canvas画图教程是一个系列的文章,但他们可能序号并不连贯,所以单纯的上一章下一章就没法让读者准确跳转。为了便于大家在各篇文章切换,我就列一个目录,供需要的读者查阅。

此目录随此系列的已发文章同步更新。

脚儿网的html5 Canvas画图系列教程目录:

html5 Canvas画图教程1:开始之前

开始canvas画图前的基础知识

html5 Canvas画图教程2:最简单的画线条

画直线与设置线条的样式,如颜色,端点,交汇点等

html5 Canvas画图3:1px线条模糊问题

讲解canvas中线条模糊的原因,及解决办法

html5 Canvas画图4:填充和渐变

html5 Canvas画图5:画曲线之arc

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

交互一般就靠它了

《html5 Canvas画图系列教程目录》有13个想法

  1. 希望你能写下去,国内canvas教程还是太少了,难道大家都在用库?我比较喜欢从最基本的学起做了10年网页设计了,最近才开始研究canvas,惭愧啊。你的教程是我的启蒙,呵呵

发表评论

电子邮件地址不会被公开。