您的位置：首页 > Web前端 > HTML5

HTML5的canvas标签

2016-03-17 14:35 543 查看

1.canvas标签

HTML5<canvas>元素用于图形的绘制，通过脚本（通常是JavaScript）来完成；

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

可以通过多种方法使用canvas绘制路径、盒、圆、字符以及添加图像。

2.标签

<canvas>

【使用canvas标签】代码示例：

[html] view
plain copy

print ?

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>



    <style>

        .canvas{



            background-color: antiquewhite;

        }

    </style>



</head>

<body>



    <canvas class="canvas" width="200px" height="200px" ></canvas>



</body>

</html>

【使用js创建canvas】代码示例：

（1）首先创建一个JavaScript文件，写入代码如下：

[javascript] view
plain copy

print ?

/**

* Created by chenyufeng on 15/9/27.

*/



var CANVAS_WIDTH = 200 , CANVAS_HEIGHT = 200;



window.onload = function(){



    createCanvas();



}



function createCanvas(){



    document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+CANVAS_WIDTH+"\" height=\""+CANVAS_HEIGHT+"\"></canvas>"

}

（2）在HTML中实现如下：

[html] view
plain copy

print ?

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>



</head>

<body>



    <script src="app.js"></script>





</body>

</html>

（3）最后的实现效果类似直接用<canvas>标签创建。

浏览器调试小技巧：

（1）个人比较喜欢chrome来调试；

（2）使用canvas时，右键浏览器页面，选择“审查元素”，就可以就行查看代码可调试，非常方便。

。

（3）调试界面如下：

。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航