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

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

在學習html5中是不可避免的會遇到繪制圓形的；

現在我們來看下繪制圓形的代碼：

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

　　　　　　cx? 水平坐標

　　　　　　cy? 垂直坐標

　　　　　　radius ?圓心（半徑）

　　　　　　start-angel? 圓周起始位置 ?

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

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

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

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");----這里就是拿到畫筆

//等會以在的代碼都會在上面這些代碼的基礎上

現在我們來畫一個圓：

ctx.beginPath();--------開啟路徑的繪制，重置path為初始狀態；
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();

最后的圖案如圖:

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

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

最后的圖案如圖:

但如果你把false換成true,結果又如下:

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

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

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

lineCap='round';

現在我們看整體代碼如下：

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

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

結果如下：

現在我樣來說下平移、綻放和旋轉等：

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

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

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

save()，restore()----提供一個堆棧，保存和恢復繪圖狀態，save將當前繪圖狀態壓入堆棧，restore出棧，恢復繪圖狀態；

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

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

?

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

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);//選轉
ctx.moveTo(10,10);
ctx.lineTo(10,150);

ctx.stroke();

最后結果如下：

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

轉載于:https://www.cnblogs.com/chencyl/p/3933737.html

總結

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

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