作者：aganar | 时间：2012-7-2 21:25:47 | [小  大] | 来源：STEP DAY | 

阅读：3909 | 

  ： 0 |  收藏 HTML5，Canvas   [摘要]： 最近居然也痴迷起了HTML5来，虽然在目前的项目中很少用到HTML5（原因是我们得考虑客户使用的是IE6、7、8的浏览器兼容性问题）。这里所写纯粹是个人兴趣。 一、什么是Canvas标签？Canvas标签有什么用途？ 这里过多的概念性解释我就不多写了的，大家完全可以百度、Google一下即可清楚更多。Canvas就是HTML5内新增的一个API标签。   <canvas> 标签定义图形，比如图表和其他图像。   <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。 二、如何使用Canvas API来画一个正方形，并加上对角线？ 1、首先在HTML内设置一个Canvas标签，并设置其Hei...

最近居然也痴迷起了HTML5来，虽然在目前的项目中很少用到HTML5（原因是我们得考虑客户使用的是IE6、7、8的浏览器兼容性问题）。这里所写纯粹是个人兴趣。

一、什么是Canvas标签？Canvas标签有什么用途？

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

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

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

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

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

<canvas> </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); //划线至右上角 context.lineTo(200, 0); //将这条线绘制到canvas上 context.stroke();

   }  
   //页面导入的时候执行画图程序  

window.addEventListener("load", drawDiagonal, true);

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

       

HTML5，Canvas    本文为原创型文章转载请尊重他人劳动成果并注明出处：?15  可以扫描本站该博客文章的QR二维码进行访问