<!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>
