1.Canvas绘制一个蓝色的矩形
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title> </head>
<body> <canvas id="myCanvas" width="300" height="200"></canvas> <script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#000099';
ctx.fillRect(0,0,80,100);
</script>
</body>
</html>
显示
2.绘制基本的直线
①绘制直线
<body>
<canvas id="myCanvas"></canvas> <script type="text/javascript">
var canvas=document.getElementById("myCanvas"); //获取Canvas对象
var ctx=canvas.getContext("2d"); //获取上下文对象
ctx.beginPath(); //开始一个新的绘制路径
ctx.moveTo(10,10); //定义直线的起点坐标
ctx.lineTo(200,10); //定义直线的终点坐标
ctx.stroke(); //沿着坐标点顺序的路径绘制直线
ctx.closePath(); //关闭当前的绘制路径
</script>
</body>
显示：
② 绘制二次曲线：
是直线锥面的两腔被一平面所截而得的曲线。二次曲线由一个起点、一个终点和一个控制点决定，当控制点经过圆锥顶点时，曲线变成一个点、直线或者相交直线，当控制点不经过圆锥顶点时，曲线可能是圆、锥圆、双曲线或抛物线。
<body> <canvas id="myCanvas">您的浏览器不支持canvas标签</canvas> <script type="text/javascript">
var canvas=document.getElementById('myCanvas');
if(canvas && canvas.getContext){ //判断Canvas对象是否为空
var ctx = canvas.getContext("2d"); //获取Canvas对象上下文
ctx.beginPath(); //开始一个新的绘制路径
ctx.moveTo(100,50); //定义直线的起点坐标为(100,50)
ctx.quadraticCurveTo(100,15,300,30); //设置二次曲线坐标
ctx.stroke(); //绘制路径
}
</script> </body>
判断Canvas对象是否为空：是因为有些浏览器对Canvas的支持不是很好，为了避免网页运行时出现错误，需要提前判断。
显示：
③绘制贝赛尔曲线
每一个顶点都有两个控制点，用于控制在该顶点两侧的曲线的弧度。它的一个起点、一个终点、两个控制点，共四个点决定一条曲线。是用Canvas的bezierCurveTo函数绘制贝赛尔函数
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>4.2.3.html</title>
</head>
<body>
<canvas id="myCanvas">您的浏览器不支持canvas标签</canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
if(canvas && canvas.getContext){ //判断Canvas对象是否为空
var ctx = canvas.getContext("2d"); //获取Canvas对象上下文
ctx.beginPath(); //开始一个新的绘制路径
ctx.moveTo(50,200); //定义直线的起点坐标为(50,200)
ctx.bezierCurveTo(50,100,200,100,200,150); //设置贝塞尔曲线坐标
ctx.stroke(); //绘制路径
}
</script>
</body>
</html>
显示：
④绘制圆弧
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>4.2.4.html</title>
</head>
<body> <canvas id="myCanvas">您的浏览器不支持canvas标签</canvas> <script type="text/javascript">
var canvas=document.getElementById('myCanvas'); if(canvas && canvas.getContext){ //判断Canvas对象是否为空
var ctx = canvas.getContext("2d"); //获取Canvas对象上下文
ctx.beginPath(); //开始一个新的绘制路径
ctx.arc(100,75,50,0,2*Math.PI*0.75); //设置圆弧坐标
ctx.stroke(); //绘制路径
}
</script>
</body>
</html>
显示：
3.绘制简单形状
①绘制圆形
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>4.3.1.html</title>
</head>
<body> <canvas id="myCanvas">您的浏览器不支持canvas标签</canvas> <script type="text/javascript">
var canvas=document.getElementById('myCanvas');
if(canvas && canvas.getContext){ //判断Canvas对象是否为空
var ctx = canvas.getContext("2d"); //获取Canvas对象上下文
ctx.beginPath(); //开始一个新的绘制路径
ctx.arc(100,75,50,0,2*Math.PI); //设置圆坐标
ctx.stroke(); //绘制路径
}
</script>
</body>
</html>
显示：
②绘制三角形
绘制三条直线，并设置三条直线的起点和终点相互连接
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body> <canvas id="myCanvas"></canvas> <script type="text/javascript">
var canvas=document.getElementById('myCanvas');
if(canvas && canvas.getContext){ //判断Canvas对象是否为空
var ctx=canvas.getContext("2d"); //获取Canvas对象上下文
ctx.beginPath(); //开始一个新的绘制路径
ctx.moveTo(0,10); //设置三角形的起点
ctx.lineTo(200,20); //设置三角形的第二个起点
ctx.lineTo(280,100); //设置三角形的第三个起点起点
ctx.closePath(); //将三角形第三个点与起点连接
ctx.stroke(); //绘制路径
}
</script>
</body>
</html>
显示：
③绘制圆角矩阵
将使用arcTo函数绘制圆角矩阵，arcTo（x1,x2,y1,y2,r）:绘制介于两个切线之间的圆弧，坐标点(x1,y1)为圆弧的起点坐标，（x2,y2）为圆弧的终点坐标，r为圆弧的半径。
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
if(canvas && canvas.getContext){
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(10,10); //在左上方开始
ctx.arcTo(100,10,100,20,10); //绘制右上方圆角
ctx.arcTo(100,110,90,110,10); //绘制右下方圆角
ctx.arcTo( 0,110,0,100,10); //绘制左下方圆角
ctx.arcTo( 0,10,10,10,10); //绘制左上方圆角
ctx.stroke();
}
</script>
</body>
显示：
④绘制自定义图形
<body> <canvas id="myCanvas"></canvas> <script type="text/javascript">
var canvas=document.getElementById("myCanvas");
if(canvas && canvas.getContext){
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); //在左上方开始
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); //在左上方开始
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); //在左上方开始
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); //在左上方开始 ctx.stroke();
}
</script>
</body>
笑脸：