欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

HTML5初识Canvas

程序员文章站 2022-04-15 19:55:30
代码即教程：HTML5初识Canvas ......
代码即教程：HTML5初识Canvas

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Canvas示例</title>
    <!--[if lte IE 8]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
</head>

<body>
    <p>Canvas的用途：</p>
    <p>动态生成和展示图形、图表、图像以及动画</p>
    <p>性能非常好：不需要将所绘制的图像中的每个图元当做对象存储。API相对简单</p>
    <p>canvas默认会创建一块矩形区域 默认尺寸 300 X 150(px)</p>
    <p>canvas的坐标默认是0,0 也叫原点</p>
    <p>canvas也可以通过css的方式增加边框、内边距、外边距等</p>
    <p>现在的大部分浏览器已经支持canvas<br /> 
老版本的IE不支持，可以使用一个js库来做兼容：explorercanvas.js <br> 
js库地址：https://github.com/arv/ExplorerCanvas
    </p>

    <canvas id="test" style="border:1px solid;" width="200" height="200">
        当浏览器不支持canvas时会显示这段文字，这里还可以使用图片代替
    </canvas>
    <script>
        function drawTest() {
            //获取canvas元素及绘图上下文对象
            var canvas = document.getElementById('test');
            var context = canvas.getContext('2d');

            //用绝对坐标来创建一条路径
            context.beginPath();
            context.moveTo(70, 140);
            context.lineTo(140, 70);
            context.stroke();
        }
        window.addEventListener("load", drawTest, true);
    </script>
</body>

</html>

 

上一篇： 是时候放弃ICC了

下一篇： Flink 运行时[Runtime] 整体架构

推荐阅读