HTML5 1 簡介和Canvas畫布

1 HTML5聲明

<!doctype> 聲明必須位于 HTML5文檔中的第一行,使用非常簡單:

<!DOCTYPE html>

2 HTML5的改進

完全支持 CSS3

用于繪畫的 canvas 元素

用于媒介回放的 video 和 audio 元素

對本地離線存儲的更好的支持

新的特殊內容元素，比如 article、footer、header、nav、section

新的表單控件，比如 calendar、date、time、email、url、search

3 HTML5 瀏覽器支持

最新版本的 Safari、Chrome、Firefox以及Opera支持某些HTML5特性。Internet Explorer 9將支持某些HTML5特性。

IE9 以下版本瀏覽器兼容HTML5的方法，使用百度靜態資源的html5shiv包：

<head>

<!--[if lt IE9]>

<![endif]-->

</head>

并在CSS加上以下代碼，手工把它們轉為塊狀元素方便布局：

/*html5*/

article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

4 HTML5 <Canvas>新元素， canvas['kænv?s]畫布

<canvas> 標簽定義圖形，比如圖表和其他圖像，您必須使用腳本來繪制圖形。

①瀏覽器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持<canvas>元素.

注: Internet Explorer 8 及更早 IE 版本的瀏覽器不支持<canvas>元素.

②創建一個畫布（Canvas）

注1：一個畫布在網頁中是一個矩形框，通過<canvas>元素來繪制，默認沒有邊框和內容。

注2：標簽通常需要指定一個id屬性(腳本中經常引用),使用width和height屬性定義的畫布的大小，使用style屬性來添加邊框。

注3：你可以在HTML頁面中使用多個<canvas>元素。

③使用 JavaScript 來繪制圖像

canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript內部完成：

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

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

1創建context對象：

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

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

2填充

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

fillRect(x,y,width,height) 方法定義了矩形當前的位置。

坐標x，y從左上角開始，水平x，豎直y

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

3路徑

在Canvas上畫線，我們將使用以下兩種方法：

moveTo(x,y) 定義線條開始點坐標

lineTo(x,y) 定義線條第二個點坐標

stroke() 繪制已定義的路線

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,50);
ctx.lineTo(0,100);
ctx.stroke();
</script>

在canvas中繪制圓形,我們將使用以下方法:

arc(x,y,r,start,stop) //strat起始角度，stop結束角度=2π

beginPath()起始一條新路線

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,50);
ctx.lineTo(0,100);
ctx.stroke();
ctx.beginPath();
ctx.arc(100,50,40,0,2*MATH.PI); //MATH.PI=3.14159...
ctx.stroke();
</script>

4 Canvas - 文本

使用 canvas 繪制文本，重要的屬性和方法如下：

font - 定義字體

fillText(text,x,y) - 在 canvas上繪制實心的文本

strokeText(text,x,y) - 在 canvas上繪制空心的文本

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
ctx.strokeText("Hello World",10,100);
</script>

5 Canvas - 漸變

漸變可以填充在矩形, 圓形,線條,文本等等,各種形狀可以自己定義不同的顏色。

createLinearGradient((x0,y0,x1,y1) - 創建線條漸變，x0,y0漸變起始點，x1,y1漸變結束點

createRadialGradient(x0,y0,r0,x1,y1,r1) - 創建一個徑向/圓漸變，x0,y0,r0漸變起始圓，x1,y1,r1漸變結束圓

addColorStop()方法指定顏色停止，參數使用坐標來描述，可以是0至1.

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 創建漸變
var grd=ctx.createLinearGradient(0,0,200,0); //水平方向漸變
grd.addColorStop(0,"red");
grd.addColorStop(0.5,"white");
grd.addColorStop(1,"blue");
// 填充漸變，當創建的與填充的范圍不同時，不能完全顯示漸變效果
ctx.fillStyle=grd;
ctx.fillRect(10,10,140,80);
</script>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);
ctx.font="30px Verdana";
// 創建一個漸變
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 填充一個漸變
ctx.fillStyle=gradient;
ctx.fillText("Big smile!",10,90);
</script>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(50,50,5,100,50,100);
grd.addColorStop(0,"white");
grd.addColorStop(1,"black");
ctx.fillStyle=grd;
ctx.fillRect(10,10,180,80);
</script>

6 Canvas - 圖像

把一幅圖像放置到畫布上, 使用以下方法:

drawImage(image,x,y) //x,y圖像左上角在畫布上的位置

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function()
{
    ctx.drawImage(img,0,10);
}
</script>

④<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()

本文鏈接：https://blog.csdn.net/wulinbanxia/article/details/73511231

智能推薦

html5——canvas

1.創建一個畫布（Canvas）一個畫布在網頁中是一個矩形框，通過 canvas 元素來繪制. 注意: 默認情況下 canvas 元素沒有邊框和內容。 canvas簡單實例如下: 2.使用 JavaScript 來繪制圖像 canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成：實例解析: 首先，找到 canvas 元素: 然后，創建 context 對象...

HTML5 canvas

什么是 canvas? HTML5 <canvas> 元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成. <canvas> 標簽只是圖形容器，您必須使用腳本來繪制圖形。你可以通過多種方法使用 canvas 繪制路徑,盒、圓、字符以及添加圖像。瀏覽器支持： Internet Explorer 9、Firefox、Opera、Chrome 和 Safari...

HTML5 canvas

canvas元素：是HTML5新增的專門用來繪制圖形的元素。canvas元素是一塊無色透明的區域，它只是一個容器，本身不具備繪制的功能，開發者通過javascript腳本在區域上實現任意繪圖。并不是所有瀏覽器都支持canvas元素。步驟: 在html5頁面的<body></body>元素中添加<canvas></canvas>元素使用id尋找頁...

HTML中常用操作關于：頁面跳轉，空格

1.頁面跳轉 2.空格的代替符...

freemarker + ItextRender 根據模板生成PDF文件

1. 制作模板 2. 獲取模板，并將所獲取的數據加載生成html文件 2. 生成PDF文件其中由兩個地方需要注意，都是關于獲取文件路徑的問題，由于項目部署的時候是打包成jar包形式，所以在開發過程中時直接安照傳統的獲取方法沒有一點文件，但是當打包后部署，總是出錯。于是參考網上文章，先將文件讀出來到項目的臨時目錄下，然后再按正常方式加載該臨時文件；還有一個問題至今沒有解決，就是關于生成PDF文件...