1、canvas 是H5 新加入的標(biāo)簽 用來在頁面中繪制圖形 一般稱之為畫布。
2李茫、canvas的寬高要以屬性的形式設(shè)置，而不是css肥橙；
3魄宏、canvas 本身并不具備圖形繪制能力 一切都是由canvas 的內(nèi)置的 context對(duì)象來完成。
獲取canvas標(biāo)簽
var cvs=document.getElementById("cvs");
getContext(參數(shù)) 來獲取context對(duì)象
var cas=cvs.getContext("2d");
4存筏、canvas 提供了兩種繪制方式
① fill() 填充
② stroke() 繪制邊框
5宠互、繪制一條線段的過程
var cvs = document.querySelector("canvas");
var cxt = cvs.getContext(“2d");
cxt.beginPath(); //開始一條路徑
cxt.moveTo(10,100); //線段起始點(diǎn)
cxt.lineTo(200,100); //線段結(jié)束點(diǎn)
cxt.stroke(); //進(jìn)行繪制
cxt.closePath(); //結(jié)束一條路徑
設(shè)置筆簇的寬度 ctx.lineWidth=5;
設(shè)置圓角 cvs.lineCap = “round”
but (平，默認(rèn)) round（圓角)square（方角）
設(shè)置筆簇的顏色cxt.strokeStyle = "pink";
還支持 rgb rgba
十六進(jìn)制等顏色表示形式
清除一個(gè)矩形區(qū)域的內(nèi)容
ctx.clearRect(0,0,cvs.width,cvs.height)
創(chuàng)建并繪制矩形的兩種方法
①
cxt.rect(10,10,100,100); //創(chuàng)建一個(gè)矩形
ctx.stroke(); //繪制邊框
②
ctx.strokeRect(x,y,w,h); //創(chuàng)建并直接繪制一個(gè)矩形
繪制弧形
ctx.arc(x,y,r,star,end,n) //繪制一段弧
ctx.stroke();
//x 圓心的x坐標(biāo)
//y 圓心的y坐標(biāo)
//r 半徑
//star 起始角 以弧度計(jì)算(弧的圓心的三點(diǎn)鐘位置是0度)
//end 結(jié)束角
//n 是否逆時(shí)針 true：逆時(shí)針 false：順時(shí)針（默認(rèn)）
fill填充
① 填充矩形區(qū)域
cxt.beginPath();
cxt.rect(20,20,100,100);
cxt.fill(); //填充創(chuàng)建的矩形區(qū)域
cxt.closePath();
②
ctx.fillRect(20,20,100,100);
填充 創(chuàng)建的一個(gè)圓
cxt.beginPath();
cxt.arc(150,150,100,0,2 * Math.PI,false);
cxt.fill(); //
cxt.closePath();
ctx.fillStyle = "pink"; 設(shè)置顏色
線性漸變
ctx.beginPath();
//創(chuàng)建一個(gè)漸變對(duì)象前兩個(gè)參數(shù)為起始位置的點(diǎn)后兩個(gè)參數(shù)為結(jié)束位置的點(diǎn)
var lg = ctx.createLinearGradient(0,100,300,0);
//給漸變添加顏色 第一個(gè)值為顏色的起始位置第二個(gè)為添加的顏色值
lg.addColorStop(0,'red');
lg.addColorStop(1,"blue");
ctx.fillStyle = lg;//將填充的顏色設(shè)置成漸變
ctx.fillRect(0,100,300,100);
ctx.closePath();
徑向漸變
ctx.beginPath();
//創(chuàng)建一個(gè)徑向漸變對(duì)象 起始圓心坐標(biāo) 起始半徑
//結(jié)束圓心坐標(biāo) 結(jié)束半徑
var rg = ctx.createRadialGradient(150,150,50,150,150,100);
rg.addColorStop(0,'red');
rg.addColorStop(1,"blue");
ctx.fillStyle = rg;
ctx.arc(150,150,100,2 * Math.PI,false);
ctx.fill();
ctx.closePath();
創(chuàng)建圖片的過程
//ctx.drawImage(Image,sx,sy,sw,sh,dx,dy,dw,dh)
//Image:就是dom里面的真實(shí)圖片
//sx:圖片左上頂點(diǎn)的x坐標(biāo)
//sy:圖片左上頂點(diǎn)的y坐標(biāo)
//sw:矩形區(qū)域的寬度 去截取圖片的寬
//sh:矩形區(qū)域的高度 去截取圖片的高
//dx:畫在canvas上面的x坐標(biāo)
//dy:畫在canvas上面的y坐標(biāo)
//dw:畫出來的寬度
//dh:畫出來的高度
// sx,sy,sw,sh:是截取圖片的過程
// dx,dy,dw,dh:把截取出來的圖片放到canvas里面的過程
