HTML5初識Canvas

時間 2019-11-09

標籤 html5 html canvas 欄目 HTML5 简体版

原文原文鏈接

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>

相關標籤/搜索

jquery+html5+css3+canvas

html5+canvas+javascript

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。