|
不考慮代碼質(zhì)量的話,，一般來說css3>canvas>純js。 1. css3動(dòng)畫是獨(dú)立與js線程的,，js的運(yùn)算操作不會(huì)阻塞css3的動(dòng)畫,，所以在系統(tǒng)cpu占用率較高的時(shí)候，css3的動(dòng)畫性能要明顯高于純js的動(dòng)畫,。 2. 純js,，請(qǐng)注意“純”這個(gè)字，它的意思是js操作dom，而不是canvas,。通過js操作dom實(shí)現(xiàn)的動(dòng)畫會(huì)引起瀏覽器的recalculate和layout,，在移動(dòng)設(shè)備上還會(huì)引起rasterize（柵格化），題主列出的三種動(dòng)畫比較,，為什么說純js的動(dòng)畫性能最低呢,，原因就是純js實(shí)現(xiàn)的動(dòng)畫不僅僅考驗(yàn)開發(fā)人員的js代碼質(zhì)量，而且隨著動(dòng)畫復(fù)雜度的提高,，被操作的dom數(shù)量的提高,，相較于css3和canvas來說，純js實(shí)現(xiàn)的動(dòng)畫性能越低,。 3. canvas相對(duì)于純js來說dom結(jié)構(gòu)要簡(jiǎn)單很多,，引起的recalculate和layout自然就少了很多，但canvas的動(dòng)畫仍然需要js代碼驅(qū)動(dòng),，占用js線程,，所以，相較于css3來說,，性能上仍然略遜一籌,。 canvas 是畫布, 也就是你可以動(dòng)態(tài)更改圖片的某一部分, 精確到 1 像素, div + css 的性能根本比不上 canvas, 你要去更改 div 的 style 才能出來效果, canvas 是瀏覽器的底層 api 幫你畫, 不是一個(gè)等級(jí) 不管怎樣，今天的主角是canvas,，canvas畫布提供的api內(nèi)容還是挺豐富的,。我們來慢慢學(xué)習(xí)： //回繪制矩形 ctx.fillStyle = 'red'; //填充的樣式 ctx.fillRect(10,10,100,100); //填充的形狀是矩形 ctx.clearRect(15,15,50,50) ; //清除指定位置 ctx.strokeStyle = 'red'; //空心的矩形樣式 ctx.strokeText('hello world',100,100); //繪制空心的矩形 // 判斷某個(gè)點(diǎn)是不是在矩形內(nèi) ctx.rect(10,10,100,100); alert(ctx.isPointInPath(10,10)); //isPointInPath某個(gè)點(diǎn)是不是在矩形內(nèi) //設(shè)置模糊效果 ctx.shadowBlur = 50; //模糊的程度 ctx.shadowColor = 'black'; //模糊的顏色 ctx.shadowOffsetX = 50; //水平方向偏移的位移 ctx.shadowOffsetX = 50; //垂直方向偏移的位移 ctx.shadowOffsetY = 50; ctx.fillStyle = 'red'; //模糊矩形 填充的樣式 ctx.fillRect(10,10,100,100) //填充的形狀是矩形 ctx.font = '30px Microsoft YAHEI' ; //模糊字體效果 ctx.fillStyle = 'red'; ctx.fillText('hello',50,50); //繪制線條 ctx.moveTo(0,0) //畫線的起點(diǎn)位置坐標(biāo) ctx.lineTo(10,10); //畫線的終點(diǎn)位置坐標(biāo) ctx.lineTo(100,50); ctx.stroke(); // stroke() 方法來繪制線條 //線條接觸端相撞 ctx.lineWidth = 10 //線條的寬度 ctx.lineCap = 'butt'; //默認(rèn)。向線條的每個(gè)末端添加平直的邊緣,。 ctx.lineCap = 'round'; //加圓形線帽,。 ctx.lineCap = 'square'; //加正方形線帽。 ctx.moveTo(10,10); ctx.lineTo(100,10); ctx.stroke(); //設(shè)置或返回兩條線相交時(shí),，所創(chuàng)建的拐角類型,。 ctx.lineWidth = 10; ctx.lineJoin = 'round' //相交處是圓角 ctx.lineJoin = 'bevel' //相交處是斜角 ctx.lineJoin = 'miter' //相交處是默認(rèn)直角 ctx.lineJoin="miter"; ctx.miterLimit=1; // 斜接長(zhǎng)度指的是在兩條線交匯處內(nèi)角和外角之間的距離。不常用 ctx.moveTo(10,10); ctx.lineTo(100,10); ctx.lineTo(50,100); ctx.closePath() ; //結(jié)束路徑,，從當(dāng)前終點(diǎn)連接到起點(diǎn) ctx.stroke(); //創(chuàng)建圓或部分圓 ctx.beginPath(); //開始畫圓 ctx.arc(100,75,50,0,2*Math.PI); //設(shè)置圓的參數(shù),，圓心x坐標(biāo)，y坐標(biāo),，半徑,，起始弧度，結(jié)束弧度,，逆時(shí)針還是順時(shí)（可選） ctx.arc(100,75,50,0,1*Math.PI); //設(shè)置圓的參數(shù),，圓心x坐標(biāo)，y坐標(biāo),，半徑,，起始弧度,，結(jié)束弧度，逆時(shí)針還是順時(shí)（可選） ctx.stroke(); //創(chuàng)建兩條直線的弧 ctx.beginPath(); ctx.moveTo(50,50); ctx.lineTo(100,50); ctx.arcTo(150,50,150,150,50); ctx.lineTo(150,150); ctx.stroke(); //繪制文本 ctx.font="20px Microsoft YAHEI"; //定義字體和大小 ctx.fillText("省省回頭車",50,50); //繪制實(shí)心字體 ctx.strokeText("省省回頭車",50,50); //繪制空心字體 ctx.textAlign = 'center' //文本在指定位置的中間 ctx.textAlign = 'left' //文本在指定位置的左邊 ctx.textAlign = 'right' //文本在指定位置的右邊 ctx.textAlign = 'start' //文本在指定位置開始 ctx.textAlign = 'end' //文本在指定位置結(jié)束 ctx.fillText("textAlign=xxxx",100,100); ctx.textBaseline="top"; //文本在指定位置 ctx.fillText("Top",5,100); ctx.textBaseline="bottom"; ctx.fillText("Bottom",50,100); ctx.textBaseline="middle"; ctx.fillText("Middle",120,100); ctx.textBaseline="alphabetic"; ctx.fillText("Alphabetic",190,100); ctx.textBaseline="hanging"; ctx.fillText("Hanging",290,100); //計(jì)算文本的寬度 var text = "省省回頭車" ctx.fillText("width"+ctx.measureText(text).width,50,100); //繪制漸變效果 var grd = ctx.createLinearGradient(0,0,200,0); //自定義樣式grd,，創(chuàng)建線性漸變 var grd=ctx.createRadialGradient(75,50,0,75,50,100); //創(chuàng)建徑向漸變,，參數(shù)(圓心x，圓心y,，半徑，結(jié)束圓的圓心的坐標(biāo)x,，y,，結(jié)束圓的半徑) grd.addColorStop(0,'red'); //起始顏色 當(dāng)我們使用漸變對(duì)象，必須使用兩種或兩種以上的停止顏色,。 grd.addColorStop(0.5,'#fff'); //終點(diǎn)顏色 參數(shù)使用坐標(biāo)來描述,，可以是0-1 grd.addColorStop(1,'yellow'); //終點(diǎn)顏色 參數(shù)使用坐標(biāo)來描述，可以是0-1 //繪制漸變矩形 ctx.fillStyle = grd; //用grd樣式填充矩形 ctx.fillRect(10,0,150,100) //繪制矩形 //繪制漸變字體 ctx.font="30px Microsoft YAHEI"; //定義字體和大小 ctx.fillStyle=grd; ctx.fillText("省省回頭車",50,50); //繪制實(shí)心字體 ctx.strokeText("省省回頭車",50,50); //繪制空心字體 //自定義模式 var pat = ctx.createPattern(img,'repeat'); var pat = ctx.createPattern(img,'repeat-x'); var pat = ctx.createPattern(img,'repeat-y'); var pat = ctx.createPattern(img,'no-repeat'); ctx.fillStyle=pat; ctx.fillRect(10,10,150,150); // 從原始畫布中剪切任意形狀和尺寸 ctx.rect(50,50,50,100); ctx.stroke(); ctx.clip(); //實(shí)現(xiàn)剪切,，超出以上矩形的位置的東西不顯示 ctx.fillStyle = 'red'; ctx.fillRect(0,0,100,100) //把圖片放在canvas上 ctx.drawImage(img,0,0) // 貝塞爾曲線 ctx.beginPath(); ctx.moveTo(100,100); ctx.quadraticCurveTo(100,0,210,100); //二次貝塞爾曲線,，一個(gè)控制點(diǎn)，一個(gè)終點(diǎn) ctx.bezierCurveTo(150,150,200,50,250,100); //三次貝塞爾曲線,，2個(gè)控制點(diǎn),，一個(gè)終點(diǎn) ctx.stroke(); //sace進(jìn)行縮放 ctx.scale(2,2) //如果您對(duì)繪圖進(jìn)行縮放，所有之后的繪圖也會(huì)被縮放,。定位也會(huì)被縮放,。如果您 scale(2,2)，那么繪圖將定位于距離畫布左上角兩倍遠(yuǎn)的位置,。 ctx.strokeRect(5,5,25,15);
//旋轉(zhuǎn)當(dāng)前繪制圖形 ctx.rotate(10*Math.PI/180); //旋轉(zhuǎn)的度數(shù)*Math.PI/180 ctx.strokeRect(50,50,100,50); //translate()重新映射畫布上的 (0,0) 位置,。 ctx.fillRect(10,10,100,100); ctx.translate(50,50) ctx.fillRect(10,10,100,100); //transform變換矩陣 ctx.fillStyle="yellow"; ctx.fillRect(0,0,250,100) ctx.transform(1,0.5,-0.5,1,30,10); //參數(shù)分別是：水平縮放繪圖，水平傾斜繪圖,，垂直傾斜繪圖,，垂直縮放繪圖，水平移動(dòng)繪圖,，垂直移動(dòng)繪圖 ctx.fillStyle="red"; ctx.fillRect(0,0,250,100); ctx.transform(1,0.5,-0.5,1,30,10); //再次調(diào)用的時(shí)候會(huì)在上一個(gè)矩陣的基礎(chǔ)上進(jìn)行繪制 ctx.fillStyle="blue"; ctx.fillRect(0,0,250,100); //setTransform變換矩陣 調(diào)用 setTransform會(huì)將上一個(gè)矩陣重置后再變換 ctx.fillStyle="yellow"; ctx.fillRect(0,0,250,100) ctx.setTransform(1,0.5,-0.5,1,30,10); //參數(shù)分別是：水平縮放繪圖,，水平傾斜繪圖，垂直傾斜繪圖,，垂直縮放繪圖,，水平移動(dòng)繪圖，垂直移動(dòng)繪圖 ctx.fillStyle="red"; ctx.fillRect(0,0,250,100); ctx.setTransform(1,0.5,-0.5,1,30,10); //再次調(diào)用的時(shí)候會(huì)在上一個(gè)矩陣的基礎(chǔ)上進(jìn)行繪制 ctx.fillStyle="blue"; ctx.fillRect(0,0,250,100); // ImageData var imgData=ctx.createImageData(100,100); //創(chuàng)建新的空白 ImageData 對(duì)象 console.log(imgData.data.length); for (var i=0;i<imgData.data.length;i+=4) // 對(duì)于 ImageData 對(duì)象中的每個(gè)像素,，都存在著四方面的信息,，即 RGBA 值： { imgData.data[i+0]=0; imgData.data[i+1]=255; imgData.data[i+2]=0; imgData.data[i+3]=255; } ctx.putImageData(imgData,10,10); //使用 putImageData() 方法將圖像數(shù)據(jù)拷貝回畫布上 // globalAlpha透明度 ctx.globalAlpha=0.5; ctx.fillStyle = 'red'; ctx.fillRect(10,10,100,100) ; // globalCompositeOperation 屬性設(shè)置或返回如何將一個(gè)源（新的）圖像繪制到目標(biāo)（已有的）的圖像上。 // 源圖像 = 您打算放置到畫布上的繪圖,。 // 目標(biāo)圖像 = 您已經(jīng)放置在畫布上的繪圖,。 ctx.fillStyle="red"; ctx.fillRect(20,20,75,50); // 目標(biāo)圖像 ctx.globalCompositeOperation="source-over"; //源圖像遮住目標(biāo)圖像,。 ctx.globalCompositeOperation="source-atop"; //源圖像遮住目標(biāo)圖像，超出的不可見 ctx.globalCompositeOperation="source-in"; //源圖像遮住目標(biāo)圖像,，目標(biāo)圖像不可見 ctx.globalCompositeOperation="source-out"; //源圖像遮住目標(biāo)圖像,，目標(biāo)圖像不可見，重疊的部分不可見 ctx.globalCompositeOperation="destination-over"; //目標(biāo)圖像遮住源圖像,， ctx.globalCompositeOperation="destination-atop"; //目標(biāo)圖像遮住源圖像,，目標(biāo)圖像不重疊的部分不可見 ctx.globalCompositeOperation="destination-out"; //目標(biāo)圖像遮住源圖像，源圖像不可見,，目標(biāo)圖像重疊的部分不可見 ctx.globalCompositeOperation="lighter"; //重疊部分顏色疊加 ctx.globalCompositeOperation="copy"; //顯示源圖像,。忽略目標(biāo)圖像。 ctx.globalCompositeOperation="xor"; //重疊部分顏色不可見 ctx.fillStyle="blue"; ctx.fillRect(50,50,75,50); // 源圖像,。 |
|
|
