HTML5 API详解（12）:canvas画布API提供的内容很丰富啊~
不考慮代碼質(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); // 源圖像。
總結(jié)
以上是生活随笔為你收集整理的HTML5 API详解（12）:canvas画布API提供的内容很丰富啊~的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 服务器被黑 追寻ip_我的服务器被打死，
- 下一篇： HTML5 API详解（6）:getUs