坐標(biāo)系
<body>
<!-- 顯示文字說(shuō)明瀏覽器不支持 -->
<canvas id="theCanvas" class="canvas" width="100" height="100">你的瀏覽器不支持canvas</canvas>
<!-- 默認(rèn)寬高300*150 -->
<script type="text/javascript">
var canvas = document.getElementById('theCanvas');
var ctx = canvas.getContext('2d');
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.stroke();
</script>
</body>
css中的寬高不是畫(huà)布的大小,當(dāng)設(shè)置了css寬高,畫(huà)布會(huì)隨之縮放
如果你的canvas的寬高是100,100,而css樣式寬高是200,200,那么你的畫(huà)布的大小會(huì)被放大成200,200,里面的內(nèi)容也會(huì)隨之縮放
畫(huà)線
var canvas = document.getElementById('theCanvas');
var ctx = canvas.getContext('2d');
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.lineTo(100,200);
ctx.stroke();
如果不設(shè)置beginpath,將會(huì)將之前重新再畫(huà)一遍
<script type="text/javascript">
var canvas = document.getElementById('theCanvas');
var ctx = canvas.getContext('2d');
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.lineTo(100,200);
ctx.strokeStyle = "#000";
ctx.stroke();
ctx.beginPath(); //重新開(kāi)始記入到內(nèi)存中
ctx.moveTo(100,0);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.strokeStyle = "#0F0";
ctx.stroke();
</script>
畫(huà)圓
ctx.beginPath();
ctx.arc(300,300,50,0,Math.PI,true); //x,y,r,弧度,true為逆時(shí)針,fasle順時(shí)針
ctx.strokeStyle = "#000";
ctx.closePath(); //閉合
ctx.stroke();
矩形
ctx.strokeRect(300,100,200,100) //左上角坐標(biāo),寬,高
填充和描邊
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.lineTo(200,100);
ctx.fill() //閉合后填充
var canvas = document.getElementById('theCanvas');
var ctx = canvas.getContext('2d');
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.lineTo(200,100);
ctx.closePath();
ctx.lineWidth = 10 //線寬度
ctx.strokeStyle = "#F00"; //描邊樣式
ctx.stroke();
ctx.fillStyle = "rgba(0,255,0,1)" //填充樣式
ctx.fill() //閉合后填充
圖形變換
平移
ctx.translate(0,100); //平移 x,y
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.lineTo(200,100);
ctx.stroke();
旋轉(zhuǎn)
ctx.rotate(Math.PI/4);
ctx.lineWidth = 5;
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.lineTo(200,100);
ctx.stroke();
縮放
ctx.scale(1,0.5);
save和restore方法
save()相當(dāng)于保存了一份環(huán)境.restore()作為恢復(fù)的作用.是成對(duì)出現(xiàn)的
漸變
var canvas = document.getElementById('theCanvas');
var ctx = canvas.getContext('2d');
var linearGradient = ctx.createLinearGradient(50,50,150,150); //起始坐標(biāo),終點(diǎn)坐標(biāo)
linearGradient.addColorStop(0,'rgb(255,0,0)');
linearGradient.addColorStop(1,'rgb(0,0,255)');
ctx.fillStyle = linearGradient;
ctx.fillRect(0,0,200,200)
徑向漸變
var rg = ctx.createRadialGradient(400,150,0,400,150,100); //起始坐標(biāo),起點(diǎn)半徑,終點(diǎn)坐標(biāo),終點(diǎn)半徑
rg.addColorStop(0,'rgb(255,0,0)');
rg.addColorStop(1,'rgb(0,0,255)');
ctx.fillStyle = rg;
ctx.beginPath();
ctx.arc(400,150,100,0,Math.PI*2,true);
ctx.fill();
文字
var str = "hello world";
ctx.font = "50px sans-serif"; //字體
ctx.textAlign = "center"; //水平對(duì)齊 這個(gè)居中是相對(duì)于這個(gè)文字的中間位置
ctx.textBaseLine = "top" //垂直對(duì)齊 top middle bottom 也是相對(duì)于文字的位置
ctx.fillText(str,300,100); //內(nèi)容,位置 填充
ctx.strokeText(str,0,300); //內(nèi)容,位置 描邊
var width = ctx.measureText(str).width; //得到文字的寬度
console.log(width);
圖像
ctx.fillRect(0,0,canvas.width,canvas.height);
var img = new Image();
img.src = "logo.png";
//一定要在圖像加載完成后的回調(diào)中繪制圖像
img.onload = function(){
//ctx.drawImage(img,0,0); //圖像 位置
ctx.drawImage(img,0,0,256,80); //圖像 位置 大小
ctx.drawImage(img,0,0,256,80,0,0,40,40); //獲取Img圖像(0,0)點(diǎn)出的40*40區(qū)域,繪制(100,100)點(diǎn)處,縮放成80*80
}
圖形畫(huà)刷
ctx.fillRect(0,0,canvas.width,canvas.height);
var img = new Image();
img.src = "logo.png";
//一定要在圖像加載完成后的回調(diào)中繪制圖像
img.onload = function(){
var pattern = ctx.createPttern(img,"repeat"); //no-repeat repeat-x repeat-y repeat
ctx.fillStyle = pattern;
ctx.fillRect(0,0,canvas.width,canvas.height);
}
