<canvas id="canvas"></canvas>
默認 300px*150px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" width="1024" height="768" style="border: 1px solid #aaa;display: block;margin: 50px auto"></canvas>
</body>
<script>
var canvas = document.getElementById("canvas");
var context=canvas.getContext("2d");
/*****************************繪製直線******************************/
//設置繪製狀態
context.beginPath();//開始
context.moveTo(100,100);//起點
context.lineTo(700,700);
context.lineTo(100,700);
context.lineTo(100,100);
context.closePath();//結束
context.lineWidth=5;
context.fillStyle="rgb(2,10,30)"
context.fill();//實心填充放置
//設置繪製狀態
context.beginPath();//開始
context.moveTo(200,100);//起點
context.lineTo(700,700);
context.closePath();//結束並且會自動封閉圖形
context.lineWidth=5;//線條寬度
context.strokeStyle="red";//線條樣式
context.stroke();//放在畫布中
/**********************繪製圓*************************/
//參數分別是：圓心x,y,半徑r,起始弧度，終止弧度，順時針/逆時針
context.beginPath();//開始
context.arc(300,300,100,0,1.5,true);
context.closePath();//結束並且會自動封閉圖形
context.stroke();//放在畫布中
</script>
</html>