我們這期接上一期的html5，雖然有太多的不足；

在上一期中我們說到Canvas繪制圖形，其中我們說到拿畫筆，然后繪制了一個實心的方框，一個邊框的空心的方框，一個有邊框有內(nèi)容的矩形，以及繪制直線，最后我們繪制了一棵松樹，現(xiàn)在我們接著上次的說；

在學(xué)習(xí)html5中是不可避免的會遇到繪制圓形的；

現(xiàn)在我們來看下繪制圓形的代碼：

　　　　arc(cx,cy,radius,start_angle,end_angle,direction);

　　　　　　cx? 水平坐標(biāo)

　　　　　　cy? 垂直坐標(biāo)

　　　　　　radius ?圓心（半徑）

　　　　　　start-angel? 圓周起始位置 ?

　　　　　　end_angle? 弧長 Math.PI是半圓? Math.PI*2是整個圓? 0.5為四分之一

　　　　　　direction 順、逆時針? false為逆時針，true為順時針（決定了圓弧的方向）

現(xiàn)在我們看了這個代碼一定還是有很多不懂吧，現(xiàn)有我們來做一個例子：

body里的代碼:

<canvas id="mycanvas" width="1000" height="600" style="border: 1px solid blue;"></canvas>

script里的代碼：

var mycanvas =document.getElementById("mycanvas");----這里就是拿到畫面
var ctx =mycanvas.getContext("2d");----這里就是拿到畫筆

//等會以在的代碼都會在上面這些代碼的基礎(chǔ)上

現(xiàn)在我們來畫一個圓：

ctx.beginPath();--------開啟路徑的繪制，重置path為初始狀態(tài)；
ctx.strokeStyle="green";-----這里是對圓的填充顏色
ctx.fillStyle="green";-----這里是對圓的線條顏色
ctx.arc(100,100,80,0*360*Math.PI/180,360*Math.PI/180,false);
ctx.stroke();
ctx.fill();

最后的圖案如圖:

但如果把繪制圓這句必變兩個數(shù)，如下：

ctx.arc(100,100,80,0*180*Math.PI/180,180*Math.PI/180,false);

最后的圖案如圖:

但如果你把false換成true,結(jié)果又如下:

圓基本上就是這樣了，如果你想要實心或者空心的，就去掉邊框和實心填充就行了。

下面我們在說一個繪制圓角直線：

在上一次中我們不是說了一個繪制直線的方法嗎，我們現(xiàn)在只要在中間加這一句話就行了：

lineCap='round';

現(xiàn)在我們看整體代碼如下：

ctx.beginPath();
ctx.lineCap='round';
ctx.strokeStyle="blue";
ctx.lineWidth=10;--------這句代碼是設(shè)置線條的寬度
ctx.moveTo(100,100);
ctx.lineTo(100,200);

closePath()---------繪制路徑path結(jié)束，它會繪制一個閉合的區(qū)間，添加一條起始位置到當(dāng)前坐標(biāo)的閉合曲線；
ctx.stroke();

結(jié)果如下：

現(xiàn)在我樣來說下平移、綻放和旋轉(zhuǎn)等：

translate(x,y)-------平移變換，原點移動到坐標(biāo)（x,y）；

rotate(a)------旋轉(zhuǎn)變換，旋轉(zhuǎn)a度角；

scale(x,y)-----伸縮變換；

save()，restore()----提供一個堆棧，保存和恢復(fù)繪圖狀態(tài)，save將當(dāng)前繪圖狀態(tài)壓入堆棧，restore出棧，恢復(fù)繪圖狀態(tài)；

fillText(text,x,y)-----繪制文字；

rect()------矩形路徑;

?

注意：在這里，平移和旋轉(zhuǎn)的都是畫布，就是說，圖形本身是沒有變的，只是變了畫布；

ctx.strokeStyle="red";
ctx.lineWidth=10;
ctx.rect(100,100,100,200);//矩形路徑
ctx.translate(100,100);//平移
ctx.scale(2,2);//縮放
ctx.rotate(30*Math.PI/180);//選轉(zhuǎn)
ctx.moveTo(10,10);
ctx.lineTo(10,150);

ctx.stroke();

最后結(jié)果如下：

本次就說到里了，如果感興趣，你現(xiàn)在也可以自己繪制一些簡單的圖形了。

轉(zhuǎn)載于:https://www.cnblogs.com/chencyl/p/3933737.html

總結(jié)

以上是生活随笔為你收集整理的html5-----2的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。