html5 <canvas> 标签
来源:互联网 发布:java编程思想pdf 编辑:程序博客网 时间:2024/06/06 04:01
定义和用法
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'); //先获取idvar 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
0 0
- [HTML5-Canvas] HTML5 <canvas> 标签
- html5标签canvas
- HTML5 canvas标签详解
- html5 之canvas标签
- Html5 Canvas 标签
- HTML5 - canvas标签
- HTML5 - canvas标签
- html5标签 canvas
- HTML5 canvas标签
- HTML5的canvas标签
- html5-canvas标签用法
- HTML5的canvas标签
- HTML5 - Canvas标签<介绍>
- HTML5 - Canvas标签<使用>
- HTML5的canvas标签
- HTML5 的<canvas>标签
- html5 <canvas> 标签
- HTML5 Canvas标签总结
- Swift中数据类型
- 深入JVM-锁与并发
- java数组
- 黑白棋子的移动(normal) 1310
- Java学习路线
- html5 <canvas> 标签
- 《明解C语言》示例代码和练习代码[第4章]
- Dubbo详解
- 经受时间沉淀的15 个 Android 通用流行框架大全
- 【Leetcode】20. Valid Parentheses
- 关于项目静态资源的调用
- C# 获取Excel的指定单元格的值
- sql语句基本操作
- 读《从Paxos到Zookeeper 分布式一致性原理与实践》笔记之Zookeeper介绍