HTML5 – 4.canvas

時間 2019-11-06

標籤 html5 html 4.canvas canvas 欄目 HTML5 简体版

原文原文鏈接

1.繪製矩形

2.繪製圓形javascript

3.繪製文字html

4.保存文件java

什麼是 Canvas?

HTML5 <canvas> 元素用於圖形的繪製，經過腳本 (一般是JavaScript)來完成.canvas

<canvas> 標籤只是圖形容器，您必須使用腳原本繪製圖形。字體

你能夠經過多種方法使用Canva繪製路徑,盒、圓、字符以及添加圖像。spa

<script>
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(0, 0, 150, 75);
    </script>

實例解析:3d

首先，找到 <canvas> 元素:rest

var c=document.getElementById("myCanvas");

而後，建立 context 對象：code

var ctx=c.getContext("2d");

getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。orm

下面的兩行代碼繪製一個紅色的矩形：

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

設置fillStyle屬性能夠是CSS顏色，漸變，或圖案。fillStyle 默認設置是#000000（黑色）。

fillRect(x,y,width,height) 方法定義了矩形當前的填充方式。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="350" style="border:1px solid #d3d3d3;"></canvas>
</body>
<script type="text/javascript">
    //1.獲取canvas元素
    var c = document.getElementById("myCanvas");
    //2.定義一個上下文context
    var ctx = c.getContext("2d");
    //3.填充與繪製邊框   
    ctx.fillStyle = "green";        //4.繪製樣式
    ctx.strokeStyle = "#fff";       //5.設置顏色值
    ctx.lineWidth = "5";            //6.設置畫筆寬度
    ctx.fillRect(0, 0, 400, 300);   //7.繪製矩形
    ctx.strokeRect(50, 50, 120, 120);
    
    ctx.strokeRect(110, 110, 180, 120);//繪製第2個矩形
</script>
</html>

<canvas> 參考手冊

顏色、樣式和陰影

屬性	描述
fillStyle	設置或返回用於填充繪畫的顏色、漸變或模式。
strokeStyle	設置或返回用於筆觸的顏色、漸變或模式。
shadowColor	設置或返回用於陰影的顏色。
shadowBlur	設置或返回用於陰影的模糊級別。
shadowOffsetX	設置或返回陰影與形狀的水平距離。
shadowOffsetY	設置或返回陰影與形狀的垂直距離。

方法	描述
createLinearGradient()	建立線性漸變（用在畫布內容上）。
createPattern()	在指定的方向上重複指定的元素。
createRadialGradient()	建立放射狀/環形的漸變（用在畫布內容上）。
addColorStop()	規定漸變對象中的顏色和中止位置。

線條樣式

屬性	描述
lineCap	設置或返回線條的結束端點樣式。
lineJoin	設置或返回兩條線相交時，所建立的拐角類型。
lineWidth	設置或返回當前的線條寬度。
miterLimit	設置或返回最大斜接長度。

矩形

方法	描述
rect()	建立矩形。
fillRect()	繪製"被填充"的矩形。
strokeRect()	繪製矩形（無填充）。
clearRect()	在給定的矩形內清除指定的像素。

路徑

方法	描述
fill()	填充當前繪圖（路徑）。
stroke()	繪製已定義的路徑。
beginPath()	起始一條路徑，或重置當前路徑。
moveTo()	把路徑移動到畫布中的指定點，不建立線條。
closePath()	建立從當前點回到起始點的路徑。
lineTo()	添加一個新點，而後在畫布中建立從該點到最後指定點的線條。
clip()	從原始畫布剪切任意形狀和尺寸的區域。
quadraticCurveTo()	建立二次貝塞爾曲線。
bezierCurveTo()	建立三次貝塞爾曲線。
arc()	建立弧/曲線（用於建立圓形或部分圓）。
arcTo()	建立兩切線之間的弧/曲線。
isPointInPath()	若是指定的點位於當前路徑中，則返回 true，不然返回 false。

轉換

方法	描述
scale()	縮放當前繪圖至更大或更小。
rotate()	旋轉當前繪圖。
translate()	從新映射畫布上的 (0,0) 位置。
transform()	替換繪圖的當前轉換矩陣。
setTransform()	將當前轉換重置爲單位矩陣。而後運行 transform()。

文本

屬性	描述
font	設置或返回文本內容的當前字體屬性。
textAlign	設置或返回文本內容的當前對齊方式。
textBaseline	設置或返回在繪製文本時使用的當前文本基線。

方法	描述
fillText()	在畫布上繪製"被填充的"文本。
strokeText()	在畫布上繪製文本（無填充）。
measureText()	返回包含指定文本寬度的對象。

圖像繪製

方法	描述
drawImage()	向畫布上繪製圖像、畫布或視頻。

像素操做

屬性	描述
width	返回 ImageData 對象的寬度。
height	返回 ImageData 對象的高度。
data	返回一個對象，其包含指定的 ImageData 對象的圖像數據。

方法	描述
createImageData()	建立新的、空白的 ImageData 對象。
getImageData()	返回 ImageData 對象，該對象爲畫布上指定的矩形複製像素數據。
putImageData()	把圖像數據（從指定的 ImageData 對象）放回畫布上。

合成

屬性	描述
globalAlpha	設置或返回繪圖的當前 alpha 或透明值。
globalCompositeOperation	設置或返回新圖像如何繪製到已有的圖像上。

其餘

方法	描述
save()	保存當前環境的狀態。
restore()	返回以前保存過的路徑狀態和屬性。
createEvent()
getContext()
toDataURL()

2.繪製圓形

1.開始建立路徑

context.beginPath();

2.建立圓形路徑

建立圓形路徑時，使用圖形上下問對象的arc方法。

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

x
圓的中心的 x 座標。

y
圓的中心的 y 座標。

r
圓的半徑。

sAngle
起始角，以弧度計（弧的圓形的三點鐘位置是 0 度）。

eAngle
結束角，以弧度計。

counterclockwise
可選。規定應該逆時針仍是順時針繪圖。False = 順時針，true = 逆時針。