HTML5中的新元素(Canvas)

写了一晚上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>

posted on 2015-12-11 00:51  后撤跳投  阅读(183)  评论(0)    收藏  举报

导航