canvas是html5中的標籤,可以使用它在頁面上去做圖,在實際的開發中,我一般都是選擇使用echarts進行統計圖的開發,當然echarts的本質也是使用了canvas這個標籤來開發的;本文主要複習一下canvas的基本使用
一、簡單使用畫布繪圖的步驟
1.使用canvas標籤 ------
2.獲取該標籤 -------- var canvas =document.queryselector("canvas");
3.獲取繪圖上下文 ------- var ctx = canvas.getcontext("2d");
4.繪製開始點 -------- ctx.moveto(100, 100);
5.繪製結束點 -------- ctx.lineto(300, 100);
6.將開始點和結束點連線起來 ------ ctx.stroke();
二、其他常用屬性
1.在畫布上繪製乙個
// 獲取畫布標籤
var canvas =document.queryselector("canvas");
// 獲取上下文
var cxt=canvas .getcontext("2d");
// 建立乙個物件
var img=new image();
//設定的路徑
img.src="flower.png"
// 將繪製在畫布上
cxt.drawimage(img,0,0);
2.使用畫布繪製漸變色
// 獲取畫布標籤
var canvas =document.queryselector("canvas");
// 獲取上下文
var cxt=canvas .getcontext("2d");
// 建立乙個線性漸變
var grd=cxt.createlineargradient(0,0,175,50); // cxt.createradialgradient();建立乙個映象漸變
//自左向右的開始顏色
grd.addcolorstop(0,"red");
// 自左向右的結束顏色(0和1之間可以新增其他的顏色)
grd.addcolorstop(1,"blue");
// 填充風格 grd前面建立的 var grd=cxt.createlineargradient(0,0,175,50);
cxt.fillstyle=grd;
//繪製的矩形
cxt.fillrect(0,0,175,50);
// 映象漸變和線性漸變的區別就是建立的時候,線性漸變是:cxt.createlineargradient(); 映象漸變是: cxt.createradialgradient();
HTML5的學習之canvas畫布 一
前面幾篇部落格我們一直在講如何使用canvas繪製一下，但是沒有講過canvas如何使用，都有哪些屬性，方法等。今天我們就來講一講canvas的有關屬性和方法。html my canvas canvas js 畫布預設 寬300px 高150px 獲取元素 var ocanvas document....
HTML5新增畫布元素canvas
canvas元素是乙個正常的html元素，相當於在頁面插入乙個畫布。在標記中設定寬 高屬性，在調整寬 高屬性後裡面的內容不會縮放。但是在css中指定這些屬性，在縮放畫布後，裡面內容也會縮放。預設情況下畫布是透明的，除非你在畫布上繪製了內容，否則是看不到它的。如果你想我證明畫布確實存在，就能看到乙個黑...
HTML5新特性 canvas 畫布
canvan 畫布 您的瀏覽器不支援canvas就是乙個標籤，預設值的大小為 300 150，display為inline block 注意 不能在css中設定寬和高，只能在標籤中設定width和height的值，沒有單位 設定居中為 text align center 定義畫筆 獲取上下文 var...