資訊專欄INFORMATION COLUMN
摘要：是新增的標(biāo)簽，是個圖形容器。允許在其區(qū)域內(nèi)進(jìn)行繪制。其它大小由和決定。的創(chuàng)建標(biāo)簽只有和兩個屬性，在沒有設(shè)置它們的情況下，默認(rèn)大小為。只有一個參數(shù)，就是上下文的格式。下面的代碼用于檢測瀏覽器的是否支持支持不支持
canvas是Html5新增的標(biāo)簽，是個圖形容器。允許JavaScript在其區(qū)域內(nèi)進(jìn)行繪制。其它大小由width和height決定。
canvas的創(chuàng)建;
canvas標(biāo)簽只有width和height兩個屬性，在沒有設(shè)置它們的情況下，canvas默認(rèn)大小為300X150。同時，如果用css來設(shè)置canvas的大小會出問題，推薦直接在canvas標(biāo)簽里設(shè)置大小或者通過JavaScript來設(shè)置大小。
動畫
圖形
游戲
字體
獲得上下文canvas只有獲得上下文之后，才能在它的上面繪畫。getContext()方法就是來獲取上下文和繪畫功能的。getContext()只有一個參數(shù)，就是上下文的格式。
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
清空畫布的方法
1.重設(shè)canvas的高度或者寬度：
由于canvas每當(dāng)高度或?qū)挾缺恢卦O(shè)時，畫布內(nèi)容就會被清空，因此可以用以下方法清空
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.可以用某一特定的顏色填充畫布，從而到達(dá)清空的目的：
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 {
// 不支持
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93568.html
摘要：給設(shè)置寬高標(biāo)簽的寬高默認(rèn)是是一個行內(nèi)塊元素可以在標(biāo)簽上通過，來設(shè)置可以在中給對象設(shè)置注意不要通過來調(diào)整的寬高導(dǎo)致內(nèi)部的畫布被拉伸，圖形變形獲取畫筆工具繪圖都是通過標(biāo)簽的畫筆來進(jìn)行的注意，不要寫成，里面?zhèn)魅氲膮?shù)目前也只有這一種情況描邊和填充 給canvas設(shè)置寬高： canvas標(biāo)簽的寬高默認(rèn)是300*150,是一個行內(nèi)塊元素 可以在canvas標(biāo)簽上通過width，height...
摘要：前言上篇主要是理論的概述，本篇會多些實踐，來講講的基礎(chǔ)用法，并包含一些基礎(chǔ)三角函數(shù)的應(yīng)用，推薦沒有基礎(chǔ)的朋友閱讀，熟悉的朋友可以跳過。完整實例一個會跟蹤鼠標(biāo)位置的箭頭三角函數(shù)上下運動終于順利過渡到三角函數(shù)的話題笑。 前言 上篇主要是理論的概述，本篇會多些實踐，來講講canvas的基礎(chǔ)用法，并包含一些基礎(chǔ)三角函數(shù)的應(yīng)用，推薦沒有canvas基礎(chǔ)的朋友閱讀，熟悉的朋友可以跳過。 本人能力...
摘要：前言上篇主要是理論的概述，本篇會多些實踐，來講講的基礎(chǔ)用法，并包含一些基礎(chǔ)三角函數(shù)的應(yīng)用，推薦沒有基礎(chǔ)的朋友閱讀，熟悉的朋友可以跳過。完整實例一個會跟蹤鼠標(biāo)位置的箭頭三角函數(shù)上下運動終于順利過渡到三角函數(shù)的話題笑。 前言 上篇主要是理論的概述，本篇會多些實踐，來講講canvas的基礎(chǔ)用法，并包含一些基礎(chǔ)三角函數(shù)的應(yīng)用，推薦沒有canvas基礎(chǔ)的朋友閱讀，熟悉的朋友可以跳過。 本人能力...
閱讀 1990·2021-09-07 10:24
閱讀 2092·2019-08-30 15:55
閱讀 2046·2019-08-30 15:43
閱讀 674·2019-08-29 15:25
閱讀 1061·2019-08-29 12:19
閱讀 1940·2019-08-23 18:32
閱讀 1522·2019-08-23 17:59
閱讀 952·2019-08-23 12:22
