Canvas
<canvas id="canvas"></canvas>
默认 300px*150px
<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>