[索引页]
[源码下载] 

千呼万唤 HTML 5 (8) - 画布（canvas）之绘制图形

作者：webabcd

介绍
HTML 5: 画布（canvas）之绘制图形

示例
1、画布 Demo | canvas.getContext(), CanvasRenderingContext2D, canvas.width, canvas.height, canvas.toDataURL()
canvas/demo.html

画布 Demo



您的浏览器不支持 canvas 标签


Demo

2、绘制矩形 | canvas.getContext(), fillRect(), fillStyle, lineWidth, strokeStyle, strokeRect(), clearRect()
canvas/shape/rectangle.html

在 canvas 上绘制矩形的 demo



您的浏览器不支持 canvas 标签


在画布上绘制一些矩形
清除画布

3、路径方式绘制 - 弧线 | beginPath(), arc(), fill(), stroke(), moveTo(), arcTo(), isPointInPath()
canvas/shape/path/arc.html

以路径的方式在 canvas 上绘制圆和弧的 demo






您的浏览器不支持 canvas 标签


在画布上绘制一些圆和弧
清除画布

4、路径方式绘制 - 曲线 | quadraticCurveTo(), bezierCurveTo()
canvas/shape/path/curve.html

以路径的方式在 canvas 上绘制曲线的 demo










您的浏览器不支持 canvas 标签


在画布上绘制一些曲线
清除画布

5、路径方式绘制 - 直线 | lineWidth, beginPath(), stroke(), moveTo(), lineTo(), lineCap, lineJoin, miterLimit, closePath()
canvas/shape/path/line.html

以路径的方式在 canvas 上绘制直线的 demo



您的浏览器不支持 canvas 标签


在画布上绘制一些直线
清除画布

6、路径方式绘制 - 矩形 | rect()
canvas/shape/path/rect.html

以路径的方式在 canvas 上绘制矩形的 demo



您的浏览器不支持 canvas 标签


在画布上绘制矩形
清除画布

OK
[源码下载]