不考慮代碼質量的話，一般來說css3>canvas>純js。

1. css3動畫是獨立與js線程的，js的運算操作不會阻塞css3的動畫，所以在系統cpu占用率較高的時候，css3的動畫性能要明顯高于純js的動畫。

2. 純js，請注意“純”這個字，它的意思是js操作dom，而不是canvas。通過js操作dom實現的動畫會引起瀏覽器的recalculate和layout，在移動設備上還會引起rasterize（柵格化），題主列出的三種動畫比較，為什么說純js的動畫性能最低呢，原因就是純js實現的動畫不僅僅考驗開發人員的js代碼質量，而且隨著動畫復雜度的提高，被操作的dom數量的提高，相較于css3和canvas來說，純js實現的動畫性能越低。

3. canvas相對于純js來說dom結構要簡單很多，引起的recalculate和layout自然就少了很多，但canvas的動畫仍然需要js代碼驅動，占用js線程，所以，相較于css3來說，性能上仍然略遜一籌。

canvas 是畫布, 也就是你可以動態更改圖片的某一部分, 精確到 1 像素, div + css 的性能根本比不上 canvas, 你要去更改 div 的 style 才能出來效果, canvas 是瀏覽器的底層 api 幫你畫, 不是一個等級

不管怎樣，今天的主角是canvas，canvas畫布提供的api內容還是挺豐富的。我們來慢慢學習：

//回繪制矩形

ctx.fillStyle = 'red'; //填充的樣式

ctx.fillRect(10,10,100,100); //填充的形狀是矩形

ctx.clearRect(15,15,50,50) ; //清除指定位置

ctx.strokeStyle = 'red'; //空心的矩形樣式

ctx.strokeText('hello world',100,100); //繪制空心的矩形

// 判斷某個點是不是在矩形內

ctx.rect(10,10,100,100);

alert(ctx.isPointInPath(10,10)); //isPointInPath某個點是不是在矩形內

//設置模糊效果

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) //畫線的起點位置坐標

ctx.lineTo(10,10); //畫線的終點位置坐標

ctx.lineTo(100,50);

ctx.stroke(); // stroke() 方法來繪制線條

//線條接觸端相撞

ctx.lineWidth = 10 //線條的寬度

ctx.lineCap = 'butt'; //默認。向線條的每個末端添加平直的邊緣。

ctx.lineCap = 'round'; //加圓形線帽。

ctx.lineCap = 'square'; //加正方形線帽。

ctx.moveTo(10,10);

ctx.lineTo(100,10);

ctx.stroke();

//設置或返回兩條線相交時，所創建的拐角類型。

ctx.lineWidth = 10;

ctx.lineJoin = 'round' //相交處是圓角

ctx.lineJoin = 'bevel' //相交處是斜角

ctx.lineJoin = 'miter' //相交處是默認直角

ctx.lineJoin="miter";

ctx.miterLimit=1; // 斜接長度指的是在兩條線交匯處內角和外角之間的距離。不常用

ctx.moveTo(10,10);

ctx.lineTo(100,10);

ctx.lineTo(50,100);

ctx.closePath() ; //結束路徑，從當前終點連接到起點

ctx.stroke();

//創建圓或部分圓

ctx.beginPath(); //開始畫圓

ctx.arc(100,75,50,0,2*Math.PI); //設置圓的參數，圓心x坐標，y坐標，半徑，起始弧度，結束弧度，逆時針還是順時（可選）

ctx.arc(100,75,50,0,1*Math.PI); //設置圓的參數，圓心x坐標，y坐標，半徑，起始弧度，結束弧度，逆時針還是順時（可選）

ctx.stroke();

//創建兩條直線的弧

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); //繪制實心字體

ctx.strokeText("省省回頭車",50,50); //繪制空心字體

ctx.textAlign = 'center' //文本在指定位置的中間

ctx.textAlign = 'left' //文本在指定位置的左邊

ctx.textAlign = 'right' //文本在指定位置的右邊

ctx.textAlign = 'start' //文本在指定位置開始

ctx.textAlign = 'end' //文本在指定位置結束

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);

//計算文本的寬度

var text = "省省回頭車"

ctx.fillText("width"+ctx.measureText(text).width,50,100);

//繪制漸變效果

var grd = ctx.createLinearGradient(0,0,200,0); //自定義樣式grd，創建線性漸變

var grd=ctx.createRadialGradient(75,50,0,75,50,100); //創建徑向漸變，參數(圓心x，圓心y，半徑，結束圓的圓心的坐標x，y，結束圓的半徑)

grd.addColorStop(0,'red'); //起始顏色 當我們使用漸變對象，必須使用兩種或兩種以上的停止顏色。

grd.addColorStop(0.5,'#fff'); //終點顏色 參數使用坐標來描述，可以是0-1

grd.addColorStop(1,'yellow'); //終點顏色 參數使用坐標來描述，可以是0-1

//繪制漸變矩形

ctx.fillStyle = grd; //用grd樣式填充矩形

ctx.fillRect(10,0,150,100) //繪制矩形

//繪制漸變字體

ctx.font="30px Microsoft YAHEI"; //定義字體和大小

ctx.fillStyle=grd;

ctx.fillText("省省回頭車",50,50); //繪制實心字體

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(); //實現剪切，超出以上矩形的位置的東西不顯示

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); //二次貝塞爾曲線，一個控制點，一個終點

ctx.bezierCurveTo(150,150,200,50,250,100); //三次貝塞爾曲線，2個控制點，一個終點

ctx.stroke();

//sace進行縮放

ctx.scale(2,2) //如果您對繪圖進行縮放，所有之后的繪圖也會被縮放。定位也會被縮放。如果您 scale(2,2)，那么繪圖將定位于距離畫布左上角兩倍遠的位置。

ctx.strokeRect(5,5,25,15);

//旋轉當前繪制圖形

ctx.rotate(10*Math.PI/180); //旋轉的度數*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); //參數分別是：水平縮放繪圖，水平傾斜繪圖，垂直傾斜繪圖，垂直縮放繪圖，水平移動繪圖，垂直移動繪圖

ctx.fillStyle="red";

ctx.fillRect(0,0,250,100);

ctx.transform(1,0.5,-0.5,1,30,10); //再次調用的時候會在上一個矩陣的基礎上進行繪制

ctx.fillStyle="blue";

ctx.fillRect(0,0,250,100);

//setTransform變換矩陣 調用 setTransform會將上一個矩陣重置后再變換

ctx.fillStyle="yellow";

ctx.fillRect(0,0,250,100)

ctx.setTransform(1,0.5,-0.5,1,30,10); //參數分別是：水平縮放繪圖，水平傾斜繪圖，垂直傾斜繪圖，垂直縮放繪圖，水平移動繪圖，垂直移動繪圖

ctx.fillStyle="red";

ctx.fillRect(0,0,250,100);

ctx.setTransform(1,0.5,-0.5,1,30,10); //再次調用的時候會在上一個矩陣的基礎上進行繪制

ctx.fillStyle="blue";

ctx.fillRect(0,0,250,100);

// ImageData

var imgData=ctx.createImageData(100,100); //創建新的空白 ImageData 對象

console.log(imgData.data.length);

for (var i=0;i<imgData.data.length;i+=4) // 對于 ImageData 對象中的每個像素，都存在著四方面的信息，即 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() 方法將圖像數據拷貝回畫布上

// globalAlpha透明度

ctx.globalAlpha=0.5;

ctx.fillStyle = 'red';

ctx.fillRect(10,10,100,100) ;

// globalCompositeOperation 屬性設置或返回如何將一個源（新的）圖像繪制到目標（已有的）的圖像上。

// 源圖像 = 您打算放置到畫布上的繪圖。

// 目標圖像 = 您已經放置在畫布上的繪圖。

ctx.fillStyle="red";

ctx.fillRect(20,20,75,50); // 目標圖像

ctx.globalCompositeOperation="source-over"; //源圖像遮住目標圖像。

ctx.globalCompositeOperation="source-atop"; //源圖像遮住目標圖像，超出的不可見

ctx.globalCompositeOperation="source-in"; //源圖像遮住目標圖像，目標圖像不可見

ctx.globalCompositeOperation="source-out"; //源圖像遮住目標圖像，目標圖像不可見，重疊的部分不可見

ctx.globalCompositeOperation="destination-over"; //目標圖像遮住源圖像，

ctx.globalCompositeOperation="destination-atop"; //目標圖像遮住源圖像，目標圖像不重疊的部分不可見

ctx.globalCompositeOperation="destination-out"; //目標圖像遮住源圖像，源圖像不可見，目標圖像重疊的部分不可見

ctx.globalCompositeOperation="lighter"; //重疊部分顏色疊加

ctx.globalCompositeOperation="copy"; //顯示源圖像。忽略目標圖像。

ctx.globalCompositeOperation="xor"; //重疊部分顏色不可見

ctx.fillStyle="blue";

ctx.fillRect(50,50,75,50); // 源圖像。

總結

以上是生活随笔為你收集整理的HTML5 API详解（12）:canvas画布API提供的内容很丰富啊~的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。