HTML5——Canvas基本介绍

来源：互联网发布：类似江南布衣淘宝店编辑：程序博客网时间：2024/06/05 06:32

1、Canvas标签

HTML5<canvas>元素用于图形的绘制，通过脚本（通常是JavaScript）来完成。<canvas>标签只是图形容器，你必须使用脚本来绘制图形。可以通过多种方法使用Canvas绘制路径、盒、圆、字符以及添加图形。

2、标签创建

<canvas>

(1)脚本创建：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <!--<style>
        .canvas{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>-->
    <script src="app.js"></script>
</head>
<body>
    <!--<canvas class="canvas"></canvas>-->
</body>
</html>

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>"
}

0 0