标签：
写了一晚上canvas的笔记和API，结果总是断网，没存，也没传上来，白写了，用canvas绘制矩形或圆形吧。
canvas是HTML5新增的一个标签，IE8和IE8以下的版本都不支持canvas，canvas在浏览器中显示的格式为图片的png格式。
<!DOCTYPE html>
<html>
<head>
<title>创建路径绘制矩形或圆形</title>
<meta charset="utf-8" />
</head>
<body>
<canvas id="canvas" width="500px" height="300px"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
// 1. 标识创建路径
context.beginPath();
// 2. 设置矩形
context.rect(10,10,100,100);
// 3. 标识结束
context.closePath();
// 4. 绘制实心
context.fill();
// 绘制空心矩形
context.beginPath();
context.rect(10,120,100,100);
context.closePath();
context.stroke();
// 绘制实心圆形
context.beginPath();
context.arc(170,60,50,0,Math.PI*2);
context.closePath();
context.fill();
// 绘制空心圆形
context.beginPath();
context.arc(170,170,50,0,Math.PI*2);
context.closePath();
context.stroke();
// 绘制实心弧形
context.beginPath();
context.arc(280,60,50,0,Math.PI*3/2,false);
context.closePath();
context.fill();
// 绘制空心弧形
context.beginPath();
context.arc(280,170,50,0,Math.PI*3/2);
context.closePath();
context.stroke();
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/webljx/p/5037824.html
