<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <h2>绘制矩形</h2> <canvas id="mo" width="400" height="280" style="border: 1px solid"></canvas> <script type="text/javascript"> var canvas = document.getElementById("mo"); var ctx = canvas.getContext("2d"); ctx.shadowBlur = 5.6;//设置阴影的模糊度 ctx.shadowColor = "#111";//设置阴影的颜色 ctx.fillStyle = "#f22"; ctx.fillRect(30, 20, 120, 60); ctx.fillStyle = "#ff2"; ctx.fillRect(80, 60, 120, 60); ctx.fillStyle = "#333"; ctx.lineWidth = 10; ctx.strokeStyle = "#6f3"; ctx.fillRect(20, 130, 120, 60); </script> <h2>绘制文字</h2> <canvas id="mc" width="800" height="280" style="border: 1px solid"></canvas> <script type="text/javascript"> var canvas = document.getElementById("mc"); var ctx = canvas.getContext("2d"); ctx.shadowBlur = 8.6;//设置阴影的模糊度 ctx.shadowColor = "#555";//设置阴影的颜色 ctx.fillStyle = "#f22"; ctx.font = "italic 50px 隶书"; ctx.textBaseline = 'top'; ctx.fillText("百代繁华一朝都，谁非过客。", 0, 0); ctx.fillStyle = "#f0f"; ctx.font = "bold 45px 宋体"; ctx.fillText("千秋明月吹角寒，花是主人。", 0, 50); </script> <h2>绘制圆形</h2> <canvas id="Canvas2" width="800" height="280" style="border: 1px solid"></canvas> <script type="text/javascript"> var canvas = document.getElementById("Canvas2"); var ctx = canvas.getContext("2d"); for (var i = 0; i < 10; i++) { ctx.beginPath();//开始定义路径 ctx.arc(i * 25, i * 25, (i + 1) * 8, 0, Math.PI * 2, true); ctx.closePath();//关闭路径 ctx.fillStyle = 'rgba(255,0,255,' + (10 - i) * 0.1 + ')'; ctx.fill(); } </script> <h2>LintTo</h2> <canvas id="Canvas1" width="800" height="280" style="border: 1px solid" ></canvas> <script type="text/javascript"> function createStar(context, n, dx, dy, size) { context.beginPath(); var dig = Math.PI / n * 4; for (var i = 0; i < n; i++) { var x = Math.sin(i * dig); var y = Math.cos(i * dig); context.lineTo(x * size + dx, y * size + dy); } context.closePath(); } var canvans = document.getElementById("Canvas1"); var ctx = canvans.getContext('2d'); createStar(ctx, 3, 60, 60, 50); ctx.fillStyle = "#556"; ctx.fill(); createStar(ctx, 5, 160, 60, 50); ctx.fillStyle = "#156"; ctx.fill(); createStar(ctx,7, 260, 60, 50); ctx.fillStyle = "#192"; ctx.fill(); createStar(ctx, 9,360, 60, 50); ctx.fillStyle = "#345"; ctx.fill(); </script> </body> </html>