<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="300px" height="300px" style="border: 1px black solid;"></canvas>
</body>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
/*通过获取id来寻找canvas元素*/
var cxt = c.getContext("2d");
/*getContext(contextID)方法返回一个用于在画布上绘图的环境,contextID指定了您想要在画布上绘制的类型,当前唯一的合法值是"2d",它指定了二维绘图*/
cxt.beginPath();
/*beginPath()丢弃任何当前定义的路径并且开始一条新的路径,当一个画布的环境第一次创建,该方法会被显式地调用.*/
cxt.moveTo(200,200);
/*moveTo(x,y)可把窗口的左上角移动到一个指定的坐标,x,y代表x,y轴的坐标*/
cxt.lineTo(250,150);
/*lineTo(x,y)方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条,x,y代表x,y轴的坐标.*/
cxt.lineTo(250,200);
cxt.moveTo(200,200);
cxt.lineTo(250,200);
cxt.arc(200,200,50,0,2*Math.PI);
/*arc(x,y,r,sAngle,eAngle,counterclockwise)方法创建弧/曲线（用于创建圆或部分圆,sAngle为起始角，以弧度计.(弧的圆形的三点钟位置是 0 度),eAngle为结束角,counterclockwise可选,规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针*/
/*起始角设置为 0，结束角设置为 2*Math.PI*/
cxt.stroke();
/*stroke()方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径.默认颜色是黑色*/
</script>
</html>
效果图
1.png
网友评论