首页 > 程序开发 > web前端 > HTML 5 >

HTML5-Canvas标签使用实例一

2012-06-12

最近居然也痴迷起了HTML5来,虽然在目前的项目中很少用到HTML5(原因是我们得考虑客户使用的是IE6、7、8的浏览器兼容性问题)。这里所写纯粹是个人兴趣。 一、什么是Canvas标签?Canvas标签有什么用途? 这里过...

最近居然也痴迷起了HTML5来,虽然在目前的项目中很少用到HTML5(原因是我们得考虑客户使用的是IE6、7、8的浏览器兼容性问题)。这里所写纯粹是个人兴趣。
一、什么是Canvas标签?Canvas标签有什么用途?

这里过多的概念性解释我就不多写了的,大家完全可以百度、Google一下即可清楚更多。Canvas就是HTML5内新增的一个API标签。

<canvas> 标签定义图形,比如图表和其他图像。

<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。


二、如何使用Canvas API来画一个正方形,并加上对角线?

1、首先在HTML内设置一个Canvas标签,并设置其Height和Width,以及Border属性,代码如下:


<!-- canvas target -->
<canvas id="diagonal" height="200px" width="200px" style="border:1px solid #000000;">
</canvas>
2、结合JS在Canvas区域内画图

function drawDiagonal() {
//取得canvas的元素及其绘图上下文
var canvasObj = document.getElementById("diagonal");
var context = canvasObj.getContext("2d");
//用绝对坐标来创建一条路径
//画两条对角线
context.beginPath();
//将点移动至原点
context.moveTo(0, 0);
//划线至右下角
context.lineTo(200, 200);
//将这条线绘制到canvas上
context.stroke();

//将点移动至右下角
context.moveTo(0, 200);
//划线至右上角 www.2cto.com
context.lineTo(200, 0);
//将这条线绘制到canvas上
context.stroke();
}
//页面导入的时候执行画图程序
window.addEventListener("load", drawDiagonal, true);

3、运行页面后效果图如下

\

摘自 aganar的专栏
相关文章
最新文章
热点推荐