一、繪制基本圖形

　　在每次用canvas畫布時，都有幾步是“套路”

　　1.在HTML中創建Canvas畫布：

<canvas id="mycanvas" width="960px" height="580px">瀏覽器不支持canvas <!-- 如果不支持會顯示這段文字 --> </canvas>

　　2.獲取畫布標簽，并得到一個2D對象：

var c = document.getElementById('mycanvas'); //獲取標簽 var ctx = c.getContext("2d"); //返回一個用來繪制環境類型的環境，返回一個2D對象 ，該對象實現了一個畫布使用的大多數方法。

　　1、繪制線條：

ctx.lineWidth = 10; //設置線條寬度 ctx.strokeStyle = "red"; //設置線條的顏色 ctx.beginPath(); //創建一個新的路徑 ctx.moveTo(10,10); //將畫筆光標位置移動到坐標（10,10）處 ctx.lineTo(150,10); //移動畫筆到坐標（150,50）處 ctx.stroke(); //開始繪制定義好的路徑

　　通過ctx.lineCap="butt"可以設置線條的形狀。有三個可取值：butt、round、square。

　　2、繪制空心矩形：

md5.strokeRect(100,100,200,240); //繪制空心矩形的函數，四個參數分別表示起點X、Y坐標、矩形長、矩形寬

　　3、繪制實心矩形：

　　方法一：使用fillRext()函數。在繪制實心矩形時，可使用fillStyle設置圖形的顏色。

　　方法二：

md5.rect(10,10,70,40); md5.fill();

　　4、畫圓：

　　使用arc()函數可以畫一個圓弧。有六個參數：圓弧中心X、Y坐標、圓弧半徑、起始角度、終

止角度、是否逆時針。可以調用fill()函數畫一個實心圓。

　　5、畫圓角矩形：

　　用arcTo函數可以畫圓角矩形。有五個參數：P1的X、Y和P2的X、Y、圓弧的半徑radius。

　　6、擦除Canvas畫板：

　　clearRect()函數。四個參數：X、Y、長度、寬度。

　　7、繪制復雜：二維貝塞爾曲線、三維貝塞爾曲線。

　　8、利用clip()函數可在指定區域繪圖。

　　9、繪制自定義圖形。

　　二、繪制文本　

　　1、cxt.font：設置字體樣式。

ctx.font = "30px Arial"; //設置文字大小和字體樣式、字體大小、斜體效果

　　2、cxt.strokeText()：設置文字內容。空心文字！有四個參數：文本字符串，坐標X、坐標Y、文本寬 。最后一個參數可以省去，省去時文本寬度自動設定為整個文本的寬度。

ctx.strokeText("Hello World",100,50); //設置文字內容

　　3、cxt.fillText():設置文字內容。實心文字！參數同strokeText();

　　4、ctx.textAlign=" ";設置文字對齊方式：center、left、right。

　　5、ctx.textBaseline=" "; 設置文字縱向對齊方式：top、middle、bottom、ideographic等。

　　三、圖片操作

　　1、利用drawImage()函數繪制圖片，該函數有三種原型：

drawImage(image,dx,dy); drawImage(image,dx,dy,dw,dh); drawImage(image,sx,sy,sw,sh,dx,dydw,dh);

　　第一參數都是要繪制的對象。

　　繪制圖像方法一：

　　在HTML添加如下代碼：

<img id="face" src="1.jpg" alt="the face" width="240px" height="240px">

　　JavaScript代碼如下：

var img=document.getElementById("face"); image.onload =function(){ctx.drawImage(image,10,10);}

　　繪制圖像方法二：

var image = new Image();image.src = "1.jpg";image.onload =function(){ctx.drawImage(image,10,10);ctx.drawImage(image,260,10,100,100);ctx.drawImage(image,50,50,100,100,260,130,100,100);}

　　一定要添加圖片的onload事件監聽！

　　第一個函數從（10,10）開始繪制整張圖片。

　　第二個函數從（260,10）繪制整張圖片到長100、寬100的矩形區域內。

　　第三個函數表示截取圖片從（50,50）到（100,100）的部分，從坐標（260,130）開始繪制，放到長100、寬100的矩形區域內。

　　2、利用getImageData和putImageData繪制圖片。

　　3、利用createImageData新建像素。

?

轉載于:https://www.cnblogs.com/suvllian/p/5451612.html

總結

以上是生活随笔為你收集整理的HTML5 Canvas游戏开发（一）基础知识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。