HTML 5深入浅出教学篇之八
作者:licqi 时间:2012-05-31阅读数:人阅读
介绍
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>[源码下载] 原文链接:http://www.cnblogs.com/webabcd/archive/2012/02/13/2348813.html
本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱:licqi@yunshuaiweb.com
上一篇:HTML 5深入浅出教学篇之七
下一篇:HTML 5深入浅出教学篇之九