<canvas>是html5新增的畫布元素，為了客戶端矢量圖形而設計的蝎亚，它自己沒有行為(僅僅是一個畫圖的容器)赶撰，但是定義了一個 API 支持腳本化客戶端繪圖操作。canvas默認的寬為300px炕舵，高為150px，你可以直接在該對象上指定寬度和高度跟畅，但是咽筋，其大多數(shù)功能都可以通過 CanvasRenderingContext2D 對象獲得。 這是通過 Canvas 對象的 getContext() 方法并且把直接量字符串 "2d" 作為唯一的參數(shù)傳遞給它而獲得的徊件。
html代碼
//添加canvas標簽
<canvas width=500 height=500></canvas>
js代碼
// 獲得canavs元素
var canvas =document.getElementById('myCanvas');
// 獲得canvas上下文對象
var ctx = canvas.getContext('2d');
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <canvas> 標簽奸攻。 注釋：Internet Explorer 8 以及更早的版本不支持 <canvas> 標簽。
一虱痕、路徑繪制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<style>
#canvas {
border: 1px solid #000000;
}
</style>
</head>
<body>
<canvas id="canvas" height="300" width="300"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.moveTo(100, 100);//移動到( 100睹耐，100)坐標點,作為起點
ctx.lineTo(200, 100); //從當前點繪制直線到(200，100)(上一個點即為當前點)
ctx.lineTo(200, 200);
ctx.stroke();//繪制路徑
</script>
</body>
</html>
效果圖
在上述js代碼中加入 ctx.closePath();創(chuàng)建一條從當前點回到起始點的路徑部翘。
//js代碼
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(200, 200);
ctx.closePath();
ctx.stroke();
效果圖
另外硝训，可以填加 lineWidth 設置線段寬度，fill(),進行填充新思，默認填充色為黑色窖梁。當存在fill()時，代碼種無 ctx.closePath()也可以進行填充夹囚。
//js代碼
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(200, 200);
ctx.closePath();
ctx.fill();
效果圖
說明
1.fill和stroke方法都是作用在當前的所有子路徑纵刘。
2.完成一條路徑后要重新開始另一條路徑時必須使用beginPath()方法, beginPath開始子路徑的一個新的集合。
例如：
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle= 'red';
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.closePath();
ctx.stroke();
ctx.strokeStyle='green';
ctx.moveTo(100, 200);
ctx.lineTo(200, 200);
ctx.stroke();
未添加closePath
添加closePath
二荸哟、文本
繪制實心文本假哎、空心文本蛔翅。
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
ctx.strokeText("Hello World", 10, 100);
文本
三、矩形
1位谋、ctx.rect(x, y, dx, dy);
x,y在矩形左上點的坐標山析，dx，dy為矩形的寬高掏父。
需配合ctx.fill() ctx.stroke()使用
2笋轨、ctx.fillRect(x, y, dx, dy);
效果同
ctx.rect(x, y, dx, dy);
ctx.fill();
3、ctx.strokeRect(x, y, dx, dy);
效果同
ctx.rect(x, y, dx, dy);
ctx.stroke();
4赊淑、ctx.clearRect(x, y, dx, dy);
擦除某一區(qū)域爵政，x,y為需擦除區(qū)域的左上點的坐標，dx陶缺，dy寬高钾挟。
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 50, 100);
ctx.strokeRect(200,50,50,100);
ctx.clearRect(50,50,30,30);
效果圖
四、弧形
arc(x, y, r, 起始弧度, 結束弧度,弧形的?方向(0或1) )
0順時針 饱岸，1逆時針
默認為0
各位置的度數(shù)
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.arc(100,100,50,0,Math.PI/180*90);
ctx.stroke();
順時針 90度圓弧
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.arc(100,100,50,0,Math.PI/180*270);
ctx.stroke();
順時針 270度圓弧
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.arc(100,100,50,0,Math.PI/180*90,1);
ctx.stroke();
逆時針 0-90 圓弧
五掺出、圖片填充
createPattern(image,"repeat|repeat-x|repeat-y|no-repeat")
//html代碼
<canvas id="canvas" width="500" height="500"></canvas>
<img src="" style="visibility: hidden">
//js代碼
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
window.onload = function () {
var Img = document.getElementsByTagName('img')[0];
ctx.fillStyle = ctx.createPattern(Img, 'repeat');//設置為重復
ctx.fillRect(0, 0, 500, 400);//填充范圍
};
效果圖
六、漸變效果
漸變可以填充在矩形, 圓形, 線條, 文本等等, 各種形狀可以自己定義不同的顏色苫费。
以下有兩種不同的方式來設置Canvas漸變：
createLinearGradient(x,y,x1,y1) - 線條漸變
x汤锨、y為起點坐標，x1百框、y1為終點坐標
createRadialGradient(x,y,r,x1,y1,r1) -徑向漸變
x,y x1,y1為圓點闲礼，r、r1位半徑
addColorStop()方法指定顏色停止铐维，參數(shù)使用坐標來描述柬泽，可以是0至1.
使用漸變，設置fillStyle或strokeStyle的值為 漸變嫁蛇，然后繪制形狀锨并，如矩形，文本棠众，或一條線琳疏。
使用createLinearGradient
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var bg = ctx.createLinearGradient(0, 0, 0, 500);
bg.addColorStop(0, '#000');
bg.addColorStop(0.5, 'red');
bg.addColorStop(1, '#fff');
ctx.fillStyle = bg;
ctx.fillRect(0, 0, 300, 300);
效果圖
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var gradient_font = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient_font.addColorStop(0,'blue');
gradient_font.addColorStop(0.3,'red');
gradient_font.addColorStop(0.6,'yellow');
gradient_font.addColorStop(1,'green');
ctx.font = '40px Arial';
ctx.fillStyle = gradient_font;
ctx.fillText('hello world', 50, 150);
文字漸變效果
使用createRadialGradient
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var bg = ctx.createRadialGradient(150, 150, 50, 150, 150, 110);
bg.addColorStop(0, '#fff');
bg.addColorStop(0.5, 'pink');
bg.addColorStop(1, '#fff');
ctx.fillStyle = bg;
ctx.fillRect(0, 0, 300, 300);
效果圖
