溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1.了解canvas元素
學習了canvas元素后,感覺能不用插件在頁面上畫圖很好,就深入了解了一下.我愿意把我學習到的分享出來,一來給初學者一點幫助,二來可以讓大家指出我的不足之處.在下還只是在學習階段.希望得到高人的指點哈.
本系列致力于簡單的動畫特效,或者游戲特效.我會將我的思考一步一步講述出來.可能會很基礎.但是一定能帶你走進這個新奇的元素. 希望與君共學習. Let us begin!
今天是第一天,我開始學習了canvas中的API.知道這是一個畫布元素,要想在里面畫東西,就要得到它的上下文(有的也叫繪圖環境).利用這個上下文,用JS調用API.從而在畫布上顯示圖像.例如這樣:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>初識 canvas</title>
</head>
<body>
<canvas id="myCanvas" width="800px" height="600px" >
your browser is not support canvas.
</canvas>
<!---------------------------------------------------------------------------->
<script type="text/javascript">
var canvas = document.getElementById("myCanvas"); //得到canvas
var canvas2D = canvas.getContext("2d"); //得到上下文
</script>
</body>
</html>可以看到頁面上有一個小方塊,這就是canvas元素,可以在里面進行繪圖了.canvas默認的大小是300*150.可以看出canvas元素就和其他的元素是一樣的,是頁面描述的一部分而已.
那么先來畫一個圖形吧.恩! 看看下面的代碼.
<script type="text/javascript">
var canvas = document.getElementById("myCanvas"); //得到canvas
var canvas2D = canvas.getContext("2d"); //得到上下文
canvas2D.fillStyle = "rgba(255,0,0,1)";
canvas2D.fillRect(10,10,100,200);
canvas2D.beginPath();
canvas2D.arc(400,400,200,0,Math.PI*2,false);
canvas2D.closePath();
canvas2D.fill();
canvas2D.beginPath(); //注意清除路徑
canvas2D.moveTo(700,0);
canvas2D.lineTo(700,500);
canvas2D.strokeStyle = "#123465";
canvas2D.stroke();
</script>這些API都可以在W3C中找到,由于這不是本文的重點,就不累述了.只是要注意的幾點(也是在下在學習的過程中遇到的問題).
1.要fill(),stroke()是把路徑填充顯示出來的.用的路徑的話,一定要記得清除路徑,就是beginPath().
2.刷新canvas有2中方法,一個是clearRect(),這個不僅可以清除canvas中所以的圖像,還可以清除一部分,從而創造出復雜的圖像,但是它不會清除畫筆.還有一個是改變canvas的大小,默認改變canvas的大小后,canvas中的圖像清除,還有畫筆也會被清除,就是默認的黑色.
下面是我寫的小球碰撞試驗,雖然這種代碼很多,但是這是基礎.有了這個基礎,就離我的目標進了一步,要問我的目標是什么,就是用canvas寫游戲啦.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>初識 canvas</title>
<!------------------------------------------------------------------------------>
<style type="text/css">
body{margin:0px;}
#myCanvas{
border:1px #0000FF solid;}
</style>
<!------------------------------------------------------------------------------>
</head>
<body>
<canvas id="myCanvas">
your browser is not support canvas.
</canvas>
<!---------------------------------------------------------------------------->
<script type="text/javascript">
function ballMove(canvasID)
{
var canvas = document.getElementById(canvasID); //得到canvas
canvas.width = 800;
canvas.height = 600;
var canvas2D = canvas.getContext("2d");
var refreshRate = ~~(1000/24); //刷新速率
var radius = 100; //園的半徑
var ballColor = "rgba(255,0,0,0.5)" //圓的顏色
var x = 100; //圓心的起始位置
var y = 100;
var x_off = 5; //x方向移動速度
var y_off = 10; //y方向移動速度
var flagx = 1; //標志變量
var flagy = 1;
var carshRight = canvas.width - radius; //碰撞的實際寬度
var carshButtom = canvas.height - radius; //碰撞的實際高度
var carshLeft = 0 + radius;
var carshTop = 0 +radius;
setInterval(
function()
{
//判斷
if(x < carshLeft)
{
x = carshLeft; //補幀操作
flagx = 1;
}
if(x > carshRight)
{
x = carshRight;
flagx = -1;
}
if(y > carshButtom)
{
y = carshButtom;
flagy = -1;
}
if(y < carshTop)
{
y = carshTop;
flagy = 1;
}
//畫圖
canvas2D.beginPath(); //下面兩句是清除畫布
canvas2D.clearRect(0,0,canvas.width,canvas.height);
canvas2D.arc(x,y,radius,0,Math.PI*2,false);
canvas2D.fillStyle = ballColor;
canvas2D.fill();
//下一幀
x = x + flagx * x_off;
y = y + flagy * y_off;
}
,refreshRate);
}
ballMove("myCanvas");
</script>
</body>
</html>動畫: 由幀構成, 所以叫補幀動畫.
每一幀就是一附圖片,人的眼睛有視覺停留的功能,大約每秒能看24附圖片.然后這些圖片經過大腦的加工,就讓人感覺到物體在移動了.所以,動畫就是圖片,在這樣就是canvas中的內容,只要canvas中的內容改變,就能形成動畫了.
這種寫法不是很科學,但是,能夠實現我想要的效果,記得一位大師說過,寫代碼不一定要多么的復雜,只要是你想要的結果,那什么代碼都行.在這個基礎上,可以實現碰撞后改變球的顏色,大小等.
也可以碰撞后減小速度.這不就是一個臺球嗎?雖然不是很完善,但有了這種思想,就一定OK的了.附上小球改變大小的實例. 還可以改變更多東西,你能想到的,就去實現吧.
初學者大多都是這樣寫的吧,我也不例外,但是在以后的代碼中,這種就會很少出現了.應為JS是面向對象的,那就用面向對象的來寫吧. 明天繼續 今天就到這里吧
下面是小球運動改變大小的代碼: 希望能想到更多的東西.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>初識 canvas</title>
<!------------------------------------------------------------------------------>
<style type="text/css">
body{margin:0px;}
#myCanvas{
border:1px #0000FF solid;}
</style>
<!------------------------------------------------------------------------------>
</head>
<body>
<canvas id="myCanvas">
your browser is not support canvas.
</canvas>
<!---------------------------------------------------------------------------->
<script type="text/javascript">
function ballMove(canvasID)
{
var canvas = document.getElementById(canvasID); //得到canvas
canvas.width = 800;
canvas.height = 600;
var canvas2D = canvas.getContext("2d");
var refreshRate = ~~(1000/24); //刷新速率
var radius = 100; //園的半徑
var ballColor = "rgba(255,0,0,0.5)" //圓的顏色
var x = 100; //圓心的起始位置
var y = 100;
var x_off = 5; //x方向移動速度
var y_off = 10; //y方向移動速度
var flagx = 1; //標志變量
var flagy = 1;
var carshRight = canvas.width - radius; //碰撞的實際寬度
var carshButtom = canvas.height - radius; //碰撞的實際高度
var carshLeft = 0 + radius;
var carshTop = 0 +radius;
setInterval(
function()
{
//判斷
if(x < carshLeft)
{
x = carshLeft; //補幀操作
flagx = 1;
}
if(x > carshRight)
{
x = carshRight;
flagx = -1;
}
if(y > carshButtom)
{
y = carshButtom;
flagy = -1;
}
if(y < carshTop)
{
y = carshTop;
flagy = 1;
}
//畫圖
canvas2D.beginPath(); //下面兩句是清除畫布
canvas2D.clearRect(0,0,canvas.width,canvas.height);
canvas2D.arc(x,y,radius,0,Math.PI*2,false);
canvas2D.fillStyle = ballColor;
canvas2D.fill();
//下一幀
x = x + flagx * x_off;
y = y + flagy * y_off;
}
,refreshRate);
}
ballMove("myCanvas");
</script>
</body>
</html>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
