原文地址：http://www.cnblogs.com/webabcd/archive/2012/02/13/2348813.html
作者：webabcd
介绍
HTML 5: 画布（canvas）之绘制图形
- 画布 Demo - 画布的基本概念及 Demo，canvas.getContext(), CanvasRenderingContext2D, canvas.width, canvas.height, canvas.toDataURL()
- 在画布上绘制矩形 - canvas.getContext(), fillRect(), fillStyle, lineWidth, strokeStyle, strokeRect(), clearRect()
- 在画布上绘制弧线（以路径的方式）- beginPath(), arc(), fill(), stroke(), moveTo(), arcTo(), isPointInPath()
- 在画布上绘制曲线（以路径的方式）- quadraticCurveTo(), bezierCurveTo()
- 在画布上绘制直线（以路径的方式）- lineWidth, beginPath(), stroke(), moveTo(), lineTo(), lineCap, lineJoin, miterLimit, closePath()
- 在画布上绘制矩形（以路径的方式）- rect()
示例
1、画布 Demo | canvas.getContext(), CanvasRenderingContext2D, canvas.width, canvas.height, canvas.toDataURL()
canvas/demo.html
<!DOCTYPE HTML>
<html>
<head><title>画布 Demo</title>
</head>
<body><canvas id="canvas" width="320" height="240" style="background-color: rgb(222, 222, 222)">您的浏览器不支持 canvas 标签</canvas><br/><button type="button" onclick="demo();">Demo</button><br /><img id="img" alt="" src="" /><script type="text/javascript">var canvas = document.getElementById('canvas')if (canvas.getContext) {alert("您的浏览器支持 canvas 标签");} else {alert("您的浏览器不支持 canvas 标签");}/** canvas 标签 - 画布标签* getContext("2d") - 获取画布标签上的 2D 上下文对象（CanvasRenderingContext2D 对象）* width - 画布的宽* height - 画布的高* canvas.toDataURL(type) - 返回画布数据，默认类型为 image/png* type - 指定返回画布数据的类型，比如可以指定为 image/jpeg，默认类型为 image/png** CanvasRenderingContext2D - 画布的 2D 上下文对象，其拥有多种绘制图像的方法* canvas - 上下文所对应的画布*/var ctx = canvas.getContext('2d');alert(ctx.canvas.id);function demo() {ctx.fillRect(20, 20, 100, 100);alert("width: " + canvas.width.toString());alert("height: " + canvas.height.toString());alert(canvas.toDataURL("image/jpeg"));alert(canvas.toDataURL()); // image/png document.getElementById("img").src = canvas.toDataURL();}</script>
</body>
</html>
2、绘制矩形 | canvas.getContext(), fillRect(), fillStyle, lineWidth, strokeStyle, strokeRect(), clearRect()
canvas/shape/rectangle.html
<!DOCTYPE HTML>
<html>
<head><title>在 canvas 上绘制矩形的 demo</title>
</head>
<body><canvas id="canvas" width="300" height="360" style="background-color: rgb(222, 222, 222)">您的浏览器不支持 canvas 标签</canvas><br/><button type="button" onclick="drawIt();">在画布上绘制一些矩形</button><button type="button" onclick="clearIt();">清除画布</button><script type="text/javascript">var canvas = document.getElementById('canvas')if (canvas.getContext) {alert("您的浏览器支持 canvas 标签");} else {alert("您的浏览器不支持 canvas 标签");}/** canvas.getContext("2d") - 获取画布标签上的 2D 上下文对象（HTML DOM CanvasRenderingContext2D 对象），其拥有多种绘制图像的方法。*/var ctx = canvas.getContext('2d');function drawIt() {clearIt();/** context.fillRect(x, y, w, h) - 绘制一个有填充色的矩形，默认填充色为 0x000000* x - 矩形左上角的 x 坐标* y - 矩形左上角的 y 坐标* w - 矩形的宽* h - 矩形的高*/ctx.fillRect(0, 0, 100, 100);/** context.fillStyle - 指定填充色的颜色值** 颜色值示例如下：* Color Name - "green"* #rgb - "#0f0"* #rrggbb = "#00ff00"* rgb(0-255, 0-255, 0-255) - rgb(0, 255, 0)* rgb(0.0%-100.0%, 0.0%-100.0%, 0.0%-100.0%) - rgb(0%, 100%, 0%)* rgba(0-255, 0-255, 0-255, 0.0-1.0) - rgb(0, 255, 0, 1)* rgba(0.0%-100.0%, 0.0%-100.0%, 0.0%-100.0%, 0.0-1.0) - rgb(0%, 100%, 0%, 1)*/ctx.fillStyle = "#0f0";ctx.fillRect(120, 0, 100, 50);/** context.lineWidth - 笔划的宽度，默认值是 1.0。* 注意看本 Demo，笔划的宽度为 10，可以明显的看出其中心线为笔划的路径，画布外的图像不予显示* context.strokeStyle - 指定笔划的颜色值* context.strokeRect(x, y, w, h) - 绘制一个不填充的矩形* x - 矩形左上角的 x 坐标* y - 矩形左上角的 y 坐标* w - 矩形的宽* h - 矩形的高*/ctx.lineWidth = 10;ctx.strokeStyle = "rgb(0, 0, 0)";ctx.strokeRect(0, 120, 100, 100);// 绘制一个填充色半透明的矩形 ctx.fillStyle = "rgba(0, 255, 0, 0.3)";ctx.fillRect(0, 240, 100, 100);}function clearIt() {/** context.clearRect(x, y, w, h) - 将指定的矩形区域上的图像全部清除*/ctx.clearRect(0, 0, 300, 360);ctx.fillStyle = "Black";ctx.strokeStyle = "Black";ctx.lineWidth = 1;}</script>
</body>
</html>
3、路径方式绘制 - 弧线 | beginPath(), arc(), fill(), stroke(), moveTo(), arcTo(), isPointInPath()
canvas/shape/path/arc.html
<!DOCTYPE HTML>
<html>
<head><title>以路径的方式在 canvas 上绘制圆和弧的 demo</title>
</head>
<body><img alt="" src="arcTo.png" /><br/><canvas id="canvas" width="260" height="360" style="background-color: rgb(222, 222, 222)">您的浏览器不支持 canvas 标签</canvas><br /><button type="button" onclick="drawIt();">在画布上绘制一些圆和弧</button><button type="button" onclick="clearIt();">清除画布</button><script type="text/javascript">var ctx = document.getElementById('canvas').getContext('2d');function drawIt() {clearIt();/** context.beginPath() - 准备绘制一条路径** context.arc(x, y, radius, startRadian, endRadian, anticlockwise) - 根据指定的参数绘制一条弧线* x - 弧线的中心点的 x 坐标* y - 弧线的中心点的 x 坐标* radius - 弧线的半径* startRadian - 弧线起始点的弧度（以 X 轴正半轴的三点钟方向为弧度 0）* endRadian - 弧线结束点的弧度（以 X 轴正半轴的三点钟方向为弧度 0）* anticlockwise - 是否以逆时针方向绘制路径** context.fill() - 使用当前的颜色或渐变色等来填充当前路径的内部** context.stroke() - 绘制当前路径** context.isPointInPath(x, y) - 判断指定的点是否在当前路径内*/// 绘制一个以黑色为填充色的圆形 ctx.beginPath();ctx.arc(50, 50, 50, 0, 2 * Math.PI, true);ctx.fill();alert(ctx.isPointInPath(50, 50));// 绘制一个以半透明蓝色为填充色的圆形 ctx.beginPath();ctx.fillStyle = "rgba(0, 0, 255, 0.5)";ctx.arc(150, 50, 50, 0, 2 * Math.PI, true);ctx.fill();ctx.lineWidth = 10;// 演示按顺时针方向绘制弧线（以 X 轴正半轴的三点钟方向为弧度 0） ctx.beginPath();ctx.strokeStyle = "rgb(0, 255, 0)";ctx.arc(50, 150, 50, 0, 1.5 * Math.PI, false);ctx.stroke();// 演示按逆时针方向绘制弧线（以 X 轴正半轴的三点钟方向为弧度 0） ctx.beginPath();ctx.strokeStyle = "rgb(0, 255, 0)";ctx.arc(150, 150, 50, 0, 1.5 * Math.PI, true);ctx.stroke();/** context.moveTo(x, y) - 新开一个路径，并指定路径的起点** context.arcTo(x1, y1, x2, y2, radius) - 通过指定切点和半径的方式绘制弧线。* x1, y1 - 路径当前点与 (x1, y1) 的连接线为弧线起点的切线。详见图片 arcTo.png* x2, y2 - (x1, y1) 与 (x2, y2) 的连接线为弧线终点的切线，此切点即为弧线的终点。详见图片 arcTo.png* radius - 弧线半径*/ctx.beginPath();ctx.strokeStyle = "rgb(0, 0, 255)";ctx.moveTo(50, 250);ctx.arcTo(150, 250, 150, 1000, 50);ctx.stroke();}function clearIt() {ctx.clearRect(0, 0, 260, 360);ctx.fillStyle = "Black";ctx.strokeStyle = "Black";ctx.lineWidth = 1;}</script>
</body>
</html>
4、路径方式绘制 - 曲线 | quadraticCurveTo(), bezierCurveTo()
canvas/shape/path/curve.html
<!DOCTYPE HTML>
<html>
<head><title>以路径的方式在 canvas 上绘制曲线的 demo</title>
</head>
<body><img alt="" src="curve.png" /><br/><img alt="" src="curve_quadratic.gif" /><br/><img alt="" src="curve_bezier.gif" /><br/><canvas id="canvas" width="260" height="300" style="background-color: rgb(222, 222, 222)">您的浏览器不支持 canvas 标签</canvas><br/><button type="button" onclick="drawIt();">在画布上绘制一些曲线</button><button type="button" onclick="clearIt();">清除画布</button><script type="text/javascript">var ctx = document.getElementById('canvas').getContext('2d');function drawIt() {clearIt();/** context.quadraticCurveTo(cpX, cpY, x, y) - 以当前点为曲线起点，按指定的参数绘制二次方贝塞尔曲线。见图 curve.png, curve_bezier.gif* cpX - 控制点的 x 轴坐标* cpY - 控制点的 y 轴坐标* x - 曲线终点的 x 轴坐标* y - 曲线终点的 y 轴坐标*/ctx.beginPath();ctx.moveTo(20, 100);ctx.quadraticCurveTo(40, 20, 180, 100);ctx.stroke();/** context.bezierCurveTo(cpX1, cpY1, cpX2, cpY2, x, y) - 以当前点为曲线起点，按指定的参数绘制三次方贝塞尔曲线。见图 curve.png, curve_quadratic.gif* cpX1 - 和曲线起点相关连的控制点的 x 轴坐标* cpY1 - 和曲线起点相关连的控制点的 y 轴坐标* cpX2 - 和曲线终点相关连的控制点的 x 轴坐标* cpY2 - 和曲线终点相关连的控制点的 y 轴坐标* x - 曲线终点的 x 轴坐标* y - 曲线终点的 y 轴坐标*/ctx.beginPath();ctx.moveTo(20, 200);ctx.bezierCurveTo(0, 160, 160, 120, 180, 200);ctx.stroke();}function clearIt() {ctx.clearRect(0, 0, 260, 300);}</script>
</body>
</html>
5、路径方式绘制 - 直线 | lineWidth, beginPath(), stroke(), moveTo(), lineTo(), lineCap, lineJoin, miterLimit, closePath()
canvas/shape/path/line.html
<!DOCTYPE HTML>
<html>
<head><title>以路径的方式在 canvas 上绘制直线的 demo</title>
</head>
<body><canvas id="canvas" width="340" height="300" style="background-color: rgb(222, 222, 222)">您的浏览器不支持 canvas 标签</canvas><br/><button type="button" onclick="drawIt();">在画布上绘制一些直线</button><button type="button" onclick="clearIt();">清除画布</button><script type="text/javascript">var ctx = document.getElementById('canvas').getContext('2d');function drawIt() {clearIt();ctx.strokeStyle = 'Green';/** context.lineWidth - 笔划的宽度，默认值是 1.0*/ctx.lineWidth = 10;/** context.beginPath() - 准备绘制一条路径* context.stroke() - 绘制当前路径* context.moveTo(x, y) - 新开一个路径，并指定路径的起点* context.lineTo(x, y) - 将当前点与指定的点用一条笔直的路径连接起来*/ctx.beginPath();ctx.moveTo(20, 20);ctx.lineTo(200, 20);ctx.stroke();/** context.lineCap - 指定线条末端的绘制方式* round - 线条末端有一个半圆形线帽* square - 线条末端有一个矩形线帽* butt - 线条末端无任何特殊处理，此值为默认值*/ctx.beginPath();ctx.lineCap = "round";ctx.moveTo(20, 40);ctx.lineTo(200, 40);ctx.stroke();ctx.beginPath();ctx.lineCap = "square";ctx.moveTo(20, 60);ctx.lineTo(200, 60);ctx.stroke();ctx.beginPath();ctx.lineCap = "butt";ctx.moveTo(20, 80);ctx.lineTo(200, 80);ctx.stroke();ctx.lineWidth = 20;/** context.lineJoin - 指定两条线段的连接方式* bevel - 两条线段的连接点用一个三角形填充* round - 两条线段的连接点用一个弧形填充* miter - 两条线段以斜接的方式连接，默认值*/ctx.beginPath();ctx.lineJoin = "bevel";ctx.moveTo(20, 120);ctx.lineTo(60, 120);ctx.lineTo(20, 160);ctx.stroke();ctx.beginPath();ctx.lineJoin = "round";ctx.moveTo(100, 120);ctx.lineTo(140, 120);ctx.lineTo(100, 160);ctx.stroke();ctx.beginPath();ctx.lineJoin = "miter";ctx.moveTo(180, 120);ctx.lineTo(220, 120);ctx.lineTo(180, 160);ctx.stroke();/** context.miterLimit - 当 lineJoin 为 miter 方式时，此值表示斜接长度与笔划宽度之间的所允许的最大比值，默认值为 10*/ctx.miterLimit = 2;ctx.beginPath();ctx.lineJoin = "miter";ctx.moveTo(260, 120);ctx.lineTo(300, 120);ctx.lineTo(260, 160);ctx.stroke();ctx.lineWidth = 2;/** context.closePath() - 如果当前路径是打开的则关闭它*/ctx.beginPath();ctx.moveTo(20, 180);ctx.lineTo(180, 180);ctx.lineTo(180, 280);ctx.closePath(); // 关闭打开的路径 ctx.stroke();}function clearIt() {ctx.clearRect(0, 0, 340, 300);ctx.fillStyle = "Black";ctx.strokeStyle = "Black";ctx.lineWidth = 1;}</script>
</body>
</html>
6、路径方式绘制 - 矩形 | rect()
canvas/shape/path/rect.html
<!DOCTYPE HTML>
<html>
<head><title>以路径的方式在 canvas 上绘制矩形的 demo</title>
</head>
<body><canvas id="canvas" width="300" height="360" style="background-color: rgb(222, 222, 222)">您的浏览器不支持 canvas 标签</canvas><br/><button type="button" onclick="drawIt();">在画布上绘制矩形</button><button type="button" onclick="clearIt();">清除画布</button><script type="text/javascript">var ctx = document.getElementById('canvas').getContext('2d');function drawIt() {clearIt();ctx.strokeStyle = "Black";/** context.rect(x, y, w, h) - 以路径的方式绘制一个矩形* x - 矩形左上角的 x 坐标* y - 矩形左上角的 y 坐标* w - 矩形的宽* h - 矩形的高*/ctx.beginPath();ctx.rect(20, 20, 260, 320);ctx.stroke();}function clearIt() {ctx.clearRect(0, 0, 300, 360);}</script>
</body>
</html>
OK
[源码下载]