<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<canvas id="myCanvas" width="1000" height="500" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//方块
ctx.rect(20,20,200,100);
ctx.stroke();
//简单的一条线
//我们接下来的 beginPath()和closePath()，是画图案的开关，尽量养成习惯，我们画的线是无色线
// ctx.stroke() 描线
ctx.beginPath();
ctx.moveTo(220,120);
ctx.lineTo(300,160);
ctx.closePath();
ctx.stroke();
//简单的一条线
ctx.beginPath();
ctx.moveTo(300,160);
ctx.lineTo(350,160); //lineto指向
ctx.closePath();
ctx.stroke();
//一个半圆
ctx.beginPath();
ctx.arc(10,60,200,0,Math.PI,false);//起点坐标，半径，角度开始，角度结束。
ctx.closePath();
ctx.stroke();
//逆时针 半圆填充上色
ctx.beginPath();
ctx.arc(700,400,20,0,Math.PI,true);
ctx.fillStyle='#ffff0f'
ctx.fill();
//顺时针，半圆填充上色
ctx.beginPath();
ctx.arc(700,300,20,0,Math.PI,false);
ctx.fillStyle='#f00f0f'
ctx.fill();
//圆弧
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.arcTo(200, 50, 200, 200, 50);//点1坐标 点2坐标 圆弧半径
ctx.lineTo(200, 200)
ctx.stroke();
//贝塞尔曲线,需要: 起点，终点，控制点(此处被一点控制)
ctx.beginPath();
ctx.moveTo(800,400); /*起点*/
var x=900,y=450; /*终点*/
var cp1x=950,cp1y=300; /*控制点*/
ctx.quadraticCurveTo(cp1x,cp1y,x,y);
ctx.stroke();
//两点控制的贝塞尔曲线
ctx.beginPath();
ctx.moveTo(900, 300); //起始点
var cp1x = 20, cp1y = 100; //控制点1
var cp2x = 100, cp2y = 120; //控制点2
var x = 950, y = 450; // 结束点
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.stroke();
</script>
</body>
</html>