1、定創建canvas畫布
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="canvas" width="1024" height="768" style="border: 1px solid #c3c3c3;">
您的瀏覽器不支持canvas，請升級瀏覽器！
</canvas>
</body>
<script>
window.onload=function(){
//canvas是采用JavaScript來獲取canvas元素
var canvas =document.getElementById("canvas");
//然后，創建 context 對象：
// getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
var context=canvas.getContext("2d);//canvas的繪圖上下文環境
}
</script>
</html>
2、繪制直線
canvas繪圖是基于狀態的，然后在調用方法來繪圖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="canvas" width="1024" height="768" style="border: 1px solid #c3c3c3;">
您的瀏覽器不支持canvas，請升級瀏覽器！
</canvas>
<script>
window.onload=function(){
//canvas是采用JavaScript來獲取canvas元素
var canvas =document.getElementById("canvas");
////canvas的繪圖上下文環境
// getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
var context=canvas.getContext("2d");
//繪制直線，設置繪圖的狀態
context.moveTo(100,100);//開始坐標
context.lineTo(600,600);//結束坐標
context.strokeStyle="aqua";
//具體繪制
context.stroke();
}
</script>
</body>
</html>
效果圖：
繪制直線.jpg
3、繪制三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
background-color: black;
margin: 10 auto;
padding: 0 auto;
}
#canvas{
margin: 200px;
}
</style>
</head>
<body>
<canvas id="canvas" width="1024" height="768" style="border: 1px solid #c3c3c3;">
您的瀏覽器不支持canvas，請升級瀏覽器！
</canvas>
<script>
window.onload=function(){
//canvas是采用JavaScript來獲取canvas元素
var canvas =document.getElementById("canvas");
////canvas的繪圖上下文環境
// getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
var context=canvas.getContext("2d");
//繪制直線，設置繪圖的狀態
//繪圖的原點是根據cancas邊框的左上角
context.moveTo(100,100);//開始坐標
context.lineTo(600,600);//第二個坐標點
context.lineTo(100,600);//第三個坐標點
context.lineTo(100,100);//回到開始坐標
context.strokeStyle="aqua";
//具體繪制
context.stroke();
}
</script>
</body>
</html>
三角形.jpg
4、創建多個圖形（context--繪制路徑）
路徑
context.beginPath() context.closePath()
畫圓并不單單是直接用arc，它還用到beginPath()方法，和closePath()方法，如果沒有重新beginPath那么前面的路勁會保留。
a、系統默認在繪制第一個路徑的開始點為beginPath。
b、如果畫完前面的路徑沒有重新指定beginPath，那么畫第其他路徑的時候會將前面最近指定的beginPath后的全部路徑重新繪制。
c、每次調用context.fill()的時候會自動把當次繪制的路徑的開始點和結束點相連，接著填充封閉的部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
background-color: black;
margin: 10 auto;
padding: 0 auto;
}
#canvas{
margin: 200px;
}
</style>
</head>
<body>
<canvas id="canvas" width="1024" height="768" style="border: 1px solid #c3c3c3;">
您的瀏覽器不支持canvas，請升級瀏覽器！
</canvas>
<script>
window.onload=function(){
//canvas是采用JavaScript來獲取canvas元素
var canvas =document.getElementById("canvas");
////canvas的繪圖上下文環境
// getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
var context=canvas.getContext("2d");
//1、繪制三角形
//設置繪圖的狀態
//繪圖的原點是根據cancas邊框的左上角
context.beginPath();//重新指定繪制
context.moveTo(100,100);//開始坐標
context.lineTo(600,600);//第二個坐標點
context.lineTo(100,600);//第三個坐標點
context.lineTo(100,100);//回到開始坐標
context.closePath();//結束繪制路徑
context.strokeStyle="aqua";//定義線條顏色
context.lineWidth=5;//線條粗細度
//具體繪制三角形
context.stroke();
// 繪制直線
context.beginPath();//重新指定繪制路徑
context.moveTo(300,200);
context.lineTo(600,500);
context.closePath();//結束繪制路徑
context.lineWidth=10;
context.fillStyle="chartreuse";//繪制填充顏色
context.stroke();
}
</script>
</body>
</html>
繪制多個圖形.jpg
5、創建七巧板（路徑繪制）
beginPath():新建路徑
closePath();閉合路徑
fill()：填充圖形
stroke()：繪制圖形輪廓
moveTo(x,y)：繪制開始路徑點
lineTo(x,y):繪制結束路徑點
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
background-color: black;
margin: 10 auto;
padding: 0 auto;
}
#canvas{
margin: 200px;
}
</style>
</head>
<body>
<canvas id="canvas" width="1024" height="868" style="border: 1px solid #c3c3c3;">
您的瀏覽器不支持canvas，請升級瀏覽器！
</canvas>
<script>
window.onload=function(){
//canvas是采用JavaScript來獲取canvas元素
var canvas =document.getElementById("canvas");
////canvas的繪圖上下文環境
// getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
var context=canvas.getContext("2d");
// 定義一個坐標點json對象數組，里面存儲，各個坐標點
var tangram=[
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a54c09"},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ccc"},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"}];
//遍歷json數組
for(var i=0;i<tangram.length;i++)
{
dram(tangram[i],context);
}
function dram(tangram,context){
context.beginPath();
context.moveTo(tangram.p[0].x,tangram.p[0].y);//定義開始繪制路徑
for(var j=1;j<tangram.p.length;j++){
context.lineTo(tangram.p[j].x,tangram.p[j].y);
}
//它會嘗試用直線連接當前端點與起始端點來關閉路徑，但如果圖形已經關閉或者只有一個點，
//它會什么都不做。這一步不是必須的。
context.closePath();
context.strokeStyle="black";//繪制線段的顏色
context.lineWidth=5;//繪制線段的粗細
context.fillStyle=tangram.color;//繪制填充顏色
context.stroke()//繪制邊框
context.fill();//繪制填充圖形
}
}
</script>
</body>
</html>
效果圖：
七巧板.png
6、繪制圓弧
方法：arc（x，y，radius，startAngle,endAngle,anticlockwise）
x，y：圓心位置
radius：半徑
startAnale：開始繪制圓弧點
endAngle:結束繪制圓弧點
anticlockwise：方向（布爾值，默認為順時針方向：true:逆時針；false:順時針）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
background-color: black;
margin: 10 auto;
padding: 0 auto;
}
#canvas{
margin: 200px;
}
</style>
</head>
<body>
<canvas id="canvas" width="1400" height="1200" style="border: 1px solid #c3c3c3;">
您的瀏覽器不支持canvas，請升級瀏覽器！
</canvas>
<script>
window.onload=function(){
//canvas是采用JavaScript來獲取canvas元素
var canvas =document.getElementById("canvas");
////canvas的繪圖上下文環境
// getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
var context=canvas.getContext("2d");
//1、繪制半圓，并填充顏色
context.beginPath();//開始繪制
context.strokeStyle="#caff67";
context.arc(100,100,50,0,Math.PI,false);
context.closePath();
context.fillStyle="#caff67";
context.fill();
context.stroke();
//2、繪制多段圓弧,未使用closePath()
var i=10;
for(var j=0;j<i;j++){
context.beginPath();
context.strokeStyle="aqua";
context.arc(200+120*j,200,50,0,2*Math.PI*(j+1)/10,false);
context.stroke();
}
//3、繪制多段圓弧,使用closePath()
//使用closePath()，把開始路徑點和結束路徑點，以線段連接起來
var k=10;
for(var j=0;j<k;j++){
context.beginPath();
context.strokeStyle="aqua";
context.arc(200+120*j,500,50,0,2*Math.PI*(j+1)/10,false);
context.closePath();
context.stroke();
}
}
</script>
</body>
</html>
效果圖：
圓弧.png
