canvas
利用canvas創建一個畫布
一個畫布在網頁中是一個矩形框，通過 <canvas> 元素來繪制.
默認情況下 <canvas> 元素沒有邊框和內容，
<canvas>的簡單實體如下：
<canvas id="myCanvas" width="200" height="100"></canvas>
以上代碼創建了一個200*100像素的矩形畫布
為它添加一個邊框，讓我們看見他：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
效果如下：
使用JS繪制canvas
canvas 元素本身是沒有繪圖能力的，所有的繪制作業必須在 JavaScript 內部完成：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
實體決議:
第一步：找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
第二步：創建 context 物件：
var ctx=c.getContext("2d");
getContext("2d") 物件是內建的 HTML5 物件，擁有多種繪制路徑、矩形、圓形、字符以及添加影像的方法，
第三步：使用下面的兩行代碼繪制一個紅色的矩形：
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
設定fillStyle屬性可以是CSS顏色，漸變，或圖案，fillStyle 默認設定是#000000（黑色），
fillRect(x,y,width,height) 方法定義了矩形當前的填充方式，
canvas坐標
canvas 是一個二維網格，
canvas 的左上角坐標為 (0,0)
上面的 fillRect 方法擁有引數 (0,0,150,75)，
意思是：在畫布上繪制 150x75 的矩形，從左上角開始 (0,0)，
canvas路徑
在Canvas上畫線，我們將使用以下兩種方法：
- moveTo(x,y) 定義線條開始坐標
- lineTo(x,y) 定義線條結束坐標
繪制線條我們必須使用到 "ink" 的方法，就像stroke().
定義開始坐標(0,0), 和結束坐標 (200,100)，然后使用 stroke() 方法來繪制線條:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
在canvas中繪制圓形, 我們將使用以下方法:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
canvas文本
使用 canvas 繪制文本，重要的屬性和方法如下：
- font - 定義字體
- fillText(text,x,y) - 在 canvas 上繪制實心的文本
- strokeText(text,x,y) - 在 canvas 上繪制空心的文本
使用 fillText():
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
使用strokeText():
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
canvas漸變
漸變可以填充在矩形, 圓形, 線條, 文本等等, 各種形狀可以自己定義不同的顏色，
以下有兩種不同的方式來設定Canvas漸變：
- createLinearGradient(x,y,x1,y1) - 創建線條漸變
- createRadialGradient(x,y,r,x1,y1,r1) - 創建一個徑向/圓漸變
當我們使用漸變物件，必須使用兩種或兩種以上的停止顏色，
addColorStop()方法指定顏色停止，引數使用坐標來描述，可以是0至1.
使用漸變，設定fillStyle或strokeStyle的值為 漸變，然后繪制形狀，如矩形，文本，或一條線，
使用 createLinearGradient():
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 創建漸變
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充漸變
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
使用 createRadialGradient():
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 創建漸變
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充漸變
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/253878.html
標籤：HTML5
上一篇：svg
下一篇：新增Input的type值