1.html5<canvas>用于繪制圖像(通過腳本JavaScript)
2.瀏覽器支持
IE9+,及現(xiàn)代瀏覽器
3.demo及屬性
var ctx=document.getElementById("myCanvas");
var ctx=c.getContext("2d");? // 建立上下文元素
fillStyle屬性-填充色 ? ctx.fillStyle="#0000ff";? 值可以是css顏色乌奇,漸變孤钦,或圖案,默認(rèn)設(shè)置為#000000(黑色)
方法:
ctx.beginPath() // 開始一條新路徑
ctx.moveTo(x,y) // 從(x,y)開始定義一條新的子路徑
ctx.lineTo(x,y) // 繪制一條線段
ctx.fillRect(x,y,width,height) // 定義了矩形當(dāng)前的填充方式
ctx.arc(x,y,r,start,stop) // 定義了繪制圓形; (x,y)表示繪制圓形的中心點坐標(biāo)
例:
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,40,40,0,2*Math.PI);
ctx.stroke();
canvas-文本
繪制文本潘靖,屬性及方法
font - 定義字體?????? ctx.font = "30px Arial";
fillText(text,x,y) - 在canvas上繪制實心的文本?????? ctx.fillText("Hello word",10,50)
strokeText(text,x,y) - 在canvas上繪制空心的文本? ctx.strokeText("Hello word",10,50)
canvas-漸變
漸變可以填充在矩形,圓形竖螃,線條摔握,文本等,兩種方式設(shè)置canvas漸變
createLinearGradient(x,y,x1,y1) - 創(chuàng)建線條漸變
createRadialGradient(x,y,r,x1,y1,r1) - 創(chuàng)建一個徑向/圓漸變
使用漸變對象寺滚,必須使用兩種或兩種以上的停止顏色柑营;
addColorStop()方法指定顏色停止,參數(shù)使用坐標(biāo)來描述村视,可以是0至1官套;
// 創(chuàng)建漸變
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"blue");
// 填充漸變
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,100)
canvas - 圖像
drawImage(image,x,y)