html5 <canvas> 标签

最新推荐文章于 2021-06-21 01:22:40 发布

lucky芬

最新推荐文章于 2021-06-21 01:22:40 发布

阅读量829

点赞数

分类专栏： H5和Css3 文章标签： html canvas

本文链接：https://blog.csdn.net/daimomo000/article/details/53703994

版权

H5和Css3 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

定义和用法

1.<canvas>只是图形容器，可定义图形，比如图表和其他图像，须使用脚本来绘制图形。

2.<canvas> 标记和 SVG 以及 VML 之间的差异

<canvas> 标记和 SVG 以及 VML 之间的一个重要的不同是，<canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。

这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。从表面上看，它们很不相同，可是，每一种都有强项和弱点。例如，SVG 绘图很容易编辑，只要从其描述中移除元素就行。

要从同一图形的一个<canvas> 标记中移除元素，往往需要擦掉绘图重新绘制它。

下面通过几个例子来更直观地感受一下canvas

1.通过 canvas 元素来显示一个红色的矩形：

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas"  width="600" height="600">
yourbrowser does not support the canvas tag
 </canvas> //之后画圆等例子，用的都是这个canvas
<script type="text/javascript">
varcanvas=document.getElementById('myCanvas'); //先获取id
var ctx=canvas.getContext('2d'); 
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
</body>
</html>

效果如下：效果图显示不出来，可以将代码复制在本地演示。

ps：清除矩形区域 context.clearRect(x,y,width,height);

2.画圆代码如下：

圆弧context.arc(x, y, radius, starAngle,endAngle, anticlockwise)

x:圆心的x坐标； y:圆心的y坐标；straAngle:开始角度； endAngle:结束角度；anticlockwise:是否逆时针（true）为逆时针，(false)为顺时针

<script>
	var canvas=document.getElementById("myCanvas");
	var context=canvas.getContext("2d");
	context.beginPath();
	context.arc(200,150,50,0,Math.PI*2,true);
	context.closePath();
	context.fillStyle="rgba(255,0,0,0.25)";
	context.fill();
</script>

每次画路径都在前后加context.beginPath() 和context.closePath()

下面的链接详细讲解了canvas画图，附有例子哦：

http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html#7