canvas基礎用法

時間 2019-11-16

標籤 canvas 基礎用法简体版

原文原文鏈接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
                overflow: hidden;
            }
            body{
                background: pink;
            }
            #test{
                background: gray;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <canvas id="test" width="300" height="300">
            <span>您的瀏覽器不支持畫布元素 請您換成萌萌的谷歌</span>
        </canvas>
    </body>
    <script type="text/javascript">
        window.onload=function(){
            //querySelector身上有坑
            //拿到畫布
            var canvas = document.querySelector("#test");
              alert(canvas);
            if(canvas.getContext){
                var ctx = canvas.getContext("2d");
            }
        }
        
        
    </script>
</html>

canvas基礎用法

1.什麼是canvas(畫布)
<canvas> 是 HTML5 新增的元素，可用於經過使用JavaScript中的腳原本繪製圖形
例如，它能夠用於繪製圖形，建立動畫。<canvas> 最先由Apple引入WebKit
咱們可使用<canvas>標籤來定義一個canvas元素
----->使用<canvas>標籤時，建議要成對出現，不要使用閉合的形式。
----->canvas元素默認具備高寬
width： 300px
height：150px

2.替換內容
<canvas>很容易定義一些替代內容。因爲某些較老的瀏覽器（尤爲是IE9以前的IE瀏覽器）
不支持HTML元素"canvas"，
但在這些瀏覽器上你應該要給用戶展現些替代內容。
這很是簡單：咱們只須要在<canvas>標籤中提供替換內容就能夠。
--->支持<canvas>的瀏覽器將會忽略在容器中包含的內容，而且只是正常渲染canvas。
--->不支持<canvas>的瀏覽器會顯示代替內容

3.canvas標籤的兩個屬性
<canvas> 看起來和 <img> 元素很相像，惟一的不一樣就是它並無 src 和 alt 屬性。
實際上，<canvas> 標籤只有兩個屬性—— width和height。這些都是可選的。
當沒有設置寬度和高度的時候，canvas會初始化寬度爲300像素和高度爲150像素。

畫布的高寬
html屬性設置width height時隻影響畫布自己不影畫布內容
css屬性設置width height時不但會影響畫布自己的高寬，
還會使畫布中的內容等比例縮放（縮放參照於畫布默認的尺寸）

4.渲染上下文
<canvas> 元素只是創造了一個固定大小的畫布，要想在它上面去繪製內容，
咱們須要找到它的渲染上下文
<canvas> 元素有一個叫作 getContext() 的方法，這個方法是用來得到渲染上下文和它的繪畫功能。
getContext()只有一個參數，上下文的格式
----->獲取方式
var canvas = document.getElementById('box');
var ctx = canvas.getContext('2d');

----->檢查支持性
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
} javascript

相關標籤/搜索

每日一句

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