Canvas基礎知識(一)

miya 發布于2019-08-22 15:35 / 972人閱讀

摘要：是新增的標簽，是個圖形容器。允許在其區域內進行繪制。其它大小由和決定。的創建標簽只有和兩個屬性，在沒有設置它們的情況下，默認大小為。只有一個參數，就是上下文的格式。下面的代碼用于檢測瀏覽器的是否支持支持不支持

canvas是Html5新增的標簽，是個圖形容器。允許JavaScript在其區域內進行繪制。其它大小由width和height決定。

canvas的創建

;
canvas標簽只有width和height兩個屬性，在沒有設置它們的情況下，canvas默認大小為300X150。同時，如果用css來設置canvas的大小會出問題，推薦直接在canvas標簽里設置大小或者通過JavaScript來設置大小。

canvas能做什么？

動畫

圖形

游戲

字體

獲得上下文

canvas只有獲得上下文之后，才能在它的上面繪畫。getContext()方法就是來獲取上下文和繪畫功能的。getContext()只有一個參數，就是上下文的格式。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

清空畫布的方法

1.重設canvas的高度或者寬度：
由于canvas每當高度或寬度被重設時，畫布內容就會被清空，因此可以用以下方法清空

function clearCanvas(){
    var canvas = document.getElementById("canvas");
    canvas.height=canvas.height;
    }

2.使用clearRect方法：

function clearCanvas(){
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0,0,canvas.width,canvas.height);
    }

3.可以用某一特定的顏色填充畫布，從而到達清空的目的：

function clearCanvas()  
{  
    var canvas=document.getElementById("Canvas");  
    var ctx= canvas.getContext("2d");  
      
    cxt.fillStyle="#000000";  
    cxt.beginPath();  
    cxt.fillRect(0,0,c.width,c.height);  
    cxt.closePath();  
}

檢查瀏覽器是否支持

最新版的 FireFox，Safari，Chrome 和 Opera 都支持 HTML5 canvas，但是 IE8及以下都不支持canvas。下面的代碼用于檢測瀏覽器的是否支持canvas
var canvas = document.getElementById("canvas");
if (canvas.getContext){

var ctx = canvas.getContext("2d");
// 支持

} else {

// 不支持

}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93568.html

canvas基礎知識點（一）

摘要：給設置寬高標簽的寬高默認是是一個行內塊元素可以在標簽上通過，來設置可以在中給對象設置注意不要通過來調整的寬高導致內部的畫布被拉伸，圖形變形獲取畫筆工具繪圖都是通過標簽的畫筆來進行的注意，不要寫成，里面傳入的參數目前也只有這一種情況描邊和填充給canvas設置寬高： canvas標簽的寬高默認是300*150,是一個行內塊元素可以在canvas標簽上通過width，height...

ephererid 2019-08-01 18:30 評論0 收藏0
【30分鐘學完】canvas動畫|游戲基礎(2)：從零開始畫畫

摘要：前言上篇主要是理論的概述，本篇會多些實踐，來講講的基礎用法，并包含一些基礎三角函數的應用，推薦沒有基礎的朋友閱讀，熟悉的朋友可以跳過。完整實例一個會跟蹤鼠標位置的箭頭三角函數上下運動終于順利過渡到三角函數的話題笑。前言上篇主要是理論的概述，本篇會多些實踐，來講講canvas的基礎用法，并包含一些基礎三角函數的應用，推薦沒有canvas基礎的朋友閱讀，熟悉的朋友可以跳過。本人能力...

anyway 2019-08-02 16:01 評論0 收藏0
【30分鐘學完】canvas動畫|游戲基礎(2)：從零開始畫畫

摘要：前言上篇主要是理論的概述，本篇會多些實踐，來講講的基礎用法，并包含一些基礎三角函數的應用，推薦沒有基礎的朋友閱讀，熟悉的朋友可以跳過。完整實例一個會跟蹤鼠標位置的箭頭三角函數上下運動終于順利過渡到三角函數的話題笑。前言上篇主要是理論的概述，本篇會多些實踐，來講講canvas的基礎用法，并包含一些基礎三角函數的應用，推薦沒有canvas基礎的朋友閱讀，熟悉的朋友可以跳過。本人能力...

Baoyuan 2019-08-22 15:42 評論0 收藏0