canvas標簽用于繪制圖畫，它是通過js來實現(xiàn)圖畫的繪制，這里將學習一下其基本用法。
首先，創(chuàng)建一個畫布，這樣我們就可以在上面進行創(chuàng)作了。
<!DOCTYPE html>
<html>
<head>
<title>canvas</title>
</head>
<body>
<canvas style="border:1px solid;"></canvas>
</body>
</html>
canvas默認會生成一個矩形，給其加上邊框，方便我們進行查看效果。接下來使用js在上面添加線條，圖形等圖畫。
2017-07-23_211538.png
線條
在這里，我們繪制一條寬度為10px的直線，坐標從（20，20）到（260，20），在瀏覽器上坐標的原點在左上角，往右為x軸，往左為y軸。直線的兩端我們設置為圓形。
<script type="text/javascript">
//獲取對象
var c=document.getElementById("myCanvas");
//getContext() 方法返回一個用于在畫布上繪圖的環(huán)境。
var ctx=c.getContext("2d");
//設置線條的寬度
ctx.lineWidth=10;
//起始一條路徑
ctx.beginPath();
//butt 默認，向線條的末端添加平直的邊緣。round 向線條的每個末端添加圓形線帽。square 向線條的每個末端添加正方形線帽。
// ctx.lineCap="square";
// ctx.lineCap="butt";
ctx.lineCap="round";
//起點
ctx.moveTo(20,20);
//終點
ctx.lineTo(260,20);
//沿路徑繪制
ctx.stroke();
</script>
2017-07-23_211811.png
然后，我們來繪制一條折線，畫一條有一個拐角的折線，我們可以想象一下我們用畫筆是怎么畫的，這里的繪制也是同樣的畫法，確定三個點，起點，轉折點，終點，然后連接起來，就可以了。
<script>
//折線
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineWidth=10;
//轉折處采用圓形
ctx.lineJoin="round";
ctx.moveTo(20,20);
ctx.lineTo(100,50);
ctx.lineTo(20,100);
ctx.stroke();
</script>
2017-07-23_213405.png
矩形
繪制矩形也是很簡單，首先確定矩形左上點坐標，然后給出矩形的寬和高就能繪制出來。
<script type="text/javascript">
//矩形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//顏色填充
ctx.fillStyle="yellow";
ctx.fillRect(20,20,150,100);
</script>
2017-07-23_214118.png
繪制一個顏色漸變的矩形。
<script type="text/javascript">
//填充顏色漸變的矩形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//4個參數(shù)分別是開始x坐標，y坐標，結束的x,y坐標
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
</script>
2017-07-23_224903.png
繪制一個矩形框顏色漸變的矩形，官方叫法為筆觸漸變的矩形。
<script type="text/javascript">
//筆觸顏色漸變的矩形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//4個參數(shù)分別是開始x坐標，y坐標，結束的x,y坐標
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"blue");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"green");
//筆觸樣式
ctx.strokeStyle=my_gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
</script>
2017-07-23_215218.png
繪制一個帶陰影的矩形。
<script type="text/javascript">
//帶陰影的矩形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//陰影級別
ctx.shadowBlur=20;
//陰影顏色
ctx.shadowColor="black";
//偏移位置
ctx.shadowOffsetX=20;
ctx.shadowOffsetY=20;
ctx.fillStyle="blue";
ctx.fillRect(20,20,150,100);
</script>
2017-07-23_220211.png
變化
這里來看一下矩形的放大效果和旋轉效果。
<script type="text/javascript">
//放大矩形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(20,20,50,30);
ctx.ctx.scale(2,2);
ctx.strokeRect(20,20,50,30);
</script>
2017-07-23_220740.png
<script type="text/javascript">
//旋轉矩形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//弧度制
ctx.rotate(20*Math.PI/180);
ctx.strokeRect(20,20,50,30);
</script>
2017-07-23_220948.png
其中還有一些屬性和方法這里就不一一介紹了，有興趣或者又需要的小伙伴可以去查看相關的手冊。想要實現(xiàn)更為厲害的效果，可以查看下面的文章。
10個會讓你驚嘆不已的HTML5畫布(CANVAS)技術應用演示
