HTML5的canvas标签

最新推荐文章于 2023-06-08 15:50:16 发布

乞力马扎罗的雪CYF

最新推荐文章于 2023-06-08 15:50:16 发布

阅读量1.6k

点赞数 1

分类专栏： HTML5 文章标签： html5 canvas

本文链接：https://blog.csdn.net/chenyufeng1991/article/details/48768229

版权

HTML5 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1.canvas标签

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

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

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

2.标签

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

<!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文件，写入代码如下：

/**
 * 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中实现如下：

<!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时，右键浏览器页面，选择“审查元素”，就可以就行查看代码可调试，非常方便。

。