js+canvas實現簡單繪圖

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas 畫布</title>
<style>
#canvas{
border:1px solid #999;
background:#cfc;
width:640px; height:450px;}
#arc,#polygon,#asd,#square,#line,#triangle{width:600px;height:400px;border:1px solid red;}

</style>
</head>
<body>
<canvas id="canvas" width="600" height="400">
The Canvas HTML5 element si not supported by your browser.
Please run this page in a different browser.
</canvas>

<canvas id="asd" width="600" height="400"></canvas>
<canvas id="square" width="600" height="400"></canvas>
<canvas id="line" width="600" height="400"></canvas>
<canvas id="triangle" width="600" height="400"></canvas>
<canvas id="arc" width="600" height="400"></canvas>
<br><br><br><br>
<h1>多邊形</h1>
<canvas id="polygon" width="400" height="400"></canvas>
<br>
Number of Sides:<input type="number" id="numSides" min="3" step="1" value="7"/><br>
Radius:<input type="number" id="radius" min="10" step="1" value="150"/><br>
<button id="drawPlygon"> Draw Polygon</button>
<script src="js/jquery1.11.js"></script>
<script>
var canvas;
var context;
//繪製弧線和圓形
function arc(){

var canvas = document.getElementById('arc').getContext('2d');
//語法 canvas.arc(x,y,radius,startAngle,endAngle,antiClockwise(Boolean));
//canvas.arc(100,100,80,18,20,false);
canvas.arc(100,100,80,18,20,true);
//畫筆顏色
canvas.strokeStyle ='#000';
//畫筆的大小
canvas.lineWidth = 2;
//開始執行
canvas.stroke();
}
//繪製多邊形
function inint(){
var btn = document.getElementById('drawPlygon');
btn.addEventListener('click',drawPlygon,false);
canvas = document.getElementById('polygon');
context = canvas.getContext('2d');
}
function polygon(){

var numSides = document.getElementById('numSides').value;
var radius = document.getElementById('radius').value;

var xCenter = parseInt(canvas.width/2);
var yCenter = parseInt(canvas.height/2);

context.clearRect(0,0,canvas.width,canvas.height);

context.beginPath();

var xPos = xCenter + radius* Math.cos(2 * Math.PI * 0 /numSides);
var yPos = yCenter + radius* Math.sin(2 * Math.PI * 0 /numSides);
context.moveTo(xPos,yPos);

for(i = 1; i <= numSides;i++ ){
xPos = xCenter + radius* Math.cos(2 * Math.PI * i /numSides);
yPos = yCenter + radius* Math.sin(2 * Math.PI * i /numSides);
context.moveTo(xPos,yPos);
}

context.closePath();

context.lineWidth = 30;
context.lineJoin = 'round';
context.stroke();

context.fillStyle = '#00f';
context.fill();
}
window.addEventListener('load',inint,false);

//網格
function showGrid(){
//獲取canvas 元素
canvas = document.getElementById('canvas');
//繪製環境
context = canvas.getContext('2d');
//線寬度
context.lineWidth = 1;
//線條顏色
context.strokeStyle = '#999';
//設置網格間隔爲100
lineSpacing = 100;
//起始座標爲(0,0)
var xPos = 0;
var yPos = 0;
//獲取canvas 的寬度高度
var numHorizontaLines = parseInt(canvas.height/lineSpacing);
var numVerticalLines = parseInt(canvas.width/lineSpacing);

for(var i =1; i <= numHorizontaLines;i++){
yPos = i*lineSpacing;
//在canvas 畫布中的當前位置，從此位置開始繪製
context.moveTo(0,yPos);
//在canvas 畫布中的終點，畫到此座標結束。
context.lineTo(canvas.width,yPos);
//執行畫筆繪製圖形或線段
context.stroke();
}

for(var i =1; i <= numVerticalLines;i++){
xPos = i*lineSpacing;
//在canvas 畫布中的當前位置，從此位置開始繪製
context.moveTo(xPos,0);
//在canvas 畫布中的終點，畫到此座標結束。
context.lineTo(xPos,canvas.height);
//在canvas 畫布中的終點，畫到此座標結束。
context.stroke();
}
for(var y= 0;y<=numHorizontaLines;y++){
for(var x= 0;x<=numVerticalLines;x++){
xPos = x*lineSpacing;
yPos = y*lineSpacing;

if(x==0 && y==0){
context.fillStyle = 'red';
}else{
context.fillStyle = '#000';
}

context.beginPath();
//在交點處繪製一個圓形
context.arc(xPos,yPos,5,0,Math.PI*2,true);
context.closePath();
//執行
context.fill();

if(x==numVerticalLines){
context.textAlign = 'right';
xPos -= 5;
}else{
context.textAlign = 'left';
xPos += 5;
}
if(y==numHorizontaLines){
yPos -= 8;
}else{
yPos += 12;
}
//顯示座標文字
//context.fillText('('+x*lineSpacing','+y*lineSpacing')',xPos,yPos);
}
}
}
window.addEventListener('load',showGrid,false);
$(function(){
arc();
square();
asd();
line();
triangle();
//polygon();
});
//繪製矩形
function square(){
//獲取canvas 元素
var canvas = document.getElementById('square').getContext('2d');
//設置陰影偏移距離
canvas.shadowOffsetX = 10;
canvas.shadowOffsetY = 10;
//設置陰影的模糊度
canvas.shadowBlur = 10;
//設置陰影顏色
canvas.shadowColor = 'rgba(200,0,200,.3)';
//設置圖形內部填充的顏色或樣式
canvas.fillStyle = 'rgba(200,0,200,1)';
//設置圖形邊線的顏色或樣式
canvas.strokeStyle = '#09c';
//與 strokeRect 結合繪製圖形邊線
canvas.lineWidth = 5;
// 設置圖形的寬高 fillRect(pos-x,pos-y,width,height)
canvas.fillRect(0,0,100,100);
//清空canvas 或者特定的區域
canvas.clearRect(25,25,50,50);
//給canvas 或者特定的區域繪製邊框
canvas.strokeRect(25,25,50,50);

}
//線性漸變色填充
function asd(){
//獲取canvas 元素
var canvas = document.getElementById('asd').getContext('2d');
//創建圖形線性填充
var grd = canvas.createLinearGradient(0,200,200,0);
//添加顏色
grd.addColorStop(0,'#000');
grd.addColorStop(0.5,'#ccc');
grd.addColorStop(1,'#000');
//設置圖形內部填充的顏色或樣式
canvas.fillStyle = grd;
//設置圖形邊線的顏色或樣式
canvas.strokeStyle = '#09c';
//與 strokeRect 結合繪製圖形邊線
canvas.lineWidth = 5;
// 設置圖形的寬高 fillRect(pos-x,pos-y,width,height)
canvas.fillRect(0,0,200,200);
//停止繪製
canvas.closePath();

//創建圖形放射狀填充
var grd1 = canvas.createRadialGradient(300,250,2,200,200,250);
//顏色
grd1.addColorStop(0,'#000');
grd1.addColorStop(1,'#ccc');
//設置圖形內部填充的顏色或樣式
canvas.fillStyle = grd1;
// 設置圖形的寬高
canvas.fillRect(200,200,200,200);
canvas.closePath();
}
//繪製線段
function line(){
var canvas = document.getElementById('line').getContext('2d');
canvas.moveTo(10,10);
canvas.lineTo(600,400);
canvas.stroke();
}
//繪製三角形
function triangle(){
var canvas = document.getElementById('triangle').getContext('2d');
//
canvas.beginPath();
canvas.moveTo(10,10);
canvas.lineTo(600,300);//對角線
canvas.lineTo(10,300);//底線
canvas.lineTo(10,10);//上，左對邊線間距

//停止繪製
canvas.closePath();

canvas.strokeStyle = '#000';
canvas.lineWidth = 3;

canvas.fillStyle = "#ccc";
canvas.fill();
//執行繪製
canvas.stroke();
}
</script>
</body>
</html>