HTML5-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、运行页面后效果图如下

最近居然也痴迷起了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、运行页面后效果图如下

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！