HTML中canvas有什么用?HTML中canvas详细用法介绍如下
<canvas></canvas>是HTML5出现的新标签，像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图.canvas是HTML5中的新元素，你可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。它也可用于创建图片特效和动画。如果你掌握了完整的命令，你可以用canvas创建丰富的web应用程序。如果你想很好的使用canvas，你首先应该很好的掌握javascript。
Canvas元素是HTML5的一部分，允许脚本语言动态渲染位图像。它最初由苹果内部使用自己Mac OS X WebKit推出，供应用程序使用像仪表盘的构件和Safari浏览器使用。后来，有人通过Gecko内核的浏览器（尤其是Mozilla 和Firefox），Opera[1]和Chrome ，和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。Novell生产的XForms处理器插件作为Internet Explorer插件支持Canvas 元素。[2] 也有人努力使用VML和JavaScript在Internet Explorer支持Canvas功能而不需要插件。[3]Google也已开始了一个项目，使用同样的技术在Internet Explorer支持Canvas能力。[4]但Internet Explorer 自Internet Explorer 9起已经可以支持 canvas 元素。Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度。 JavaScript代码可以访问该地区，通过一套完整的绘图功能类似于其他通用二维的API ，从而使动态生成的图形。Canvas还有一些可能的用途， 包括使用Canvas构造图形，动画，游戏和图片。
HTML5 canvas 进行图形设计的详细步骤如下:
设计和开发一个web页面会包含很多的内容，用户首先需要有一个支持HTML canvas的浏览器。
首先创建一个HTML5文档页面，设置document type是HTMl5的；
其次在页面body区域添加一个canvas标签：
<canvas></canvas>
第三、给这个canvas定义一个id属性，这样方便我们在js中调用它。添加一个宽和高属性，在canvas标签中添加一个当浏览器不支持的时候显示给用户的内容。下面是列子代码：
<canvas id="canvastest" width="500" height="600">
<p>你的浏览器不支持HTML5 canvas,请更新您的浏览器！</p>
</canvas>
现在我们创建了一个包含HTML5 canvas 元素的空白画布，我们将使用js和canvas元素的方法来创建我们的图像。
添加一个javascript用HTMl5 canvas的方法：
var canvasTest=document.getElementById('canvastest');//获取canvas元素；
var testcontext=canvasTest.getContext('2d');使用javascript来创建你的画布，你可以使用矩形、圆圈和三角形,并使用线、幻灯片和渐变来创建你的设计。
<canvas></canvas>实例
通过 <canvas> 元素来显示一个红色的矩形：
<canvas id="myCanvas"></canvas> <script type="text/javascript">var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);</script>
浏览器支持
IE 9、Firefox、Opera、Chrome 和 Safari 支持 <canvas> 标签。
注释：IE 8 或更早版本的 IE 浏览器不支持 <canvas> 标签。
标签定义及使用说明
<canvas> 标签通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
HTML 4.01 与 HTML5之间的差异
<canvas> 标签是 HTML5 中的新标签。
注释：<canvas> 元素中的任何文本将会被显示在不支持 <canvas> 的浏览器中。
提示：如想了解 canvas 对象的所有属性和方法，请参阅HTML 画布参考手册。
属性
New : HTML5 中的新属性。
<canvas> 标签支持 HTML 的全局属性。
事件属性
<canvas> 标签支持 HTML 的事件属性。
Canvas实现的简单动画：弹球动画实例代码
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>HTML5-canvas</title>
</head>
<body>
<canvas id="ldsun" width="500" height="200" ></canvas>
<div id="ds"></div>
<script type="text/javascript">
var canvas = document.getElementById('ldsun');
var p100=canvas.getContext("2d");
var width=400; //设置线条获得区域宽度
var height=200; //设置线条获得区域高度
var start=0 //设置线条起点
var exp=1; //设置线条每次移动像素大小
p100.strokeStyle = "rgba(255,0,0,1)"; //定义颜色
function draw(){
p100.clearRect(0,0,width,height) // 擦除画布一个区域xy、xy
p100.fillStyle="blue"; //定义颜色
p100.beginPath(); //从新开始画，防止冲突重叠
p100.arc(180,start,20,0,Math.PI*2,1); //x坐标，y坐标，半径，Math.PI是圆周率
p100.closePath(); //结束画布，防止冲突重叠
p100.fill(); //结束渲染
start=start+exp; //起点+活动像素位置
if(start==0 || start==height-1){ //判断当前线的位置，控制在区域内
exp=exp*-1; //乘以负一用来调整线路方向
}
}
</script>
<input onclick="interval=setInterval(draw,5);" value="开始" type="button" />
<input onclick="clearInterval(interval);" value="停止" type="button" />
</body>
</html>
-
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载,整理或搜集自网络.欢迎任何形式的转载，转载请注明出处.
转载请注明：文章转载自:[169IT-IT技术资讯]
本文标题:HTML <canvas> 标签
