Canvas绘制图形
2017-01-01 13:32
507 查看
1.Canvas绘制一个蓝色的矩形
显示
2.绘制基本的直线
①绘制直线
显示：
② 绘制二次曲线：
是直线锥面的两腔被一平面所截而得的曲线。二次曲线由一个起点、一个终点和一个控制点决定，当控制点经过圆锥顶点时，曲线变成一个点、直线或者相交直线，当控制点不经过圆锥顶点时，曲线可能是圆、锥圆、双曲线或抛物线。
判断Canvas对象是否为空：是因为有些浏览器对Canvas的支持不是很好，为了避免网页运行时出现错误，需要提前判断。
显示：
③绘制贝赛尔曲线
每一个顶点都有两个控制点，用于控制在该顶点两侧的曲线的弧度。它的一个起点、一个终点、两个控制点，共四个点决定一条曲线。是用Canvas的bezierCurveTo函数绘制贝赛尔函数
显示：
④绘制圆弧
显示：
3.绘制简单形状
①绘制圆形
显示：
②绘制三角形
绘制三条直线，并设置三条直线的起点和终点相互连接
显示：
③绘制圆角矩阵
将使用arcTo函数绘制圆角矩阵，arcTo（x1,x2,y1,y2,r）:绘制介于两个切线之间的圆弧，坐标点(x1,y1)为圆弧的起点坐标，（x2,y2）为圆弧的终点坐标，r为圆弧的半径。
显示：
④绘制自定义图形
笑脸：
<!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>显示：
④绘制圆弧
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>4.2.4.html</title>
6 </head>
7 <body>
8
9 <canvas id="myCanvas">您的浏览器不支持canvas标签</canvas>
10
11 <script type="text/javascript">
12 var canvas=document.getElementById('myCanvas');
13
14 if(canvas && canvas.getContext){ //判断Canvas对象是否为空
15 var ctx = canvas.getContext("2d"); //获取Canvas对象上下文
16 ctx.beginPath(); //开始一个新的绘制路径
17 ctx.arc(100,75,50,0,2*Math.PI*0.75); //设置圆弧坐标
18 ctx.stroke(); //绘制路径
19 }
20 </script>
21 </body>
22 </html>显示：
3.绘制简单形状
①绘制圆形
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>4.3.1.html</title>
6 </head>
7 <body>
8
9 <canvas id="myCanvas">您的浏览器不支持canvas标签</canvas>
10
11 <script type="text/javascript">
12 var canvas=document.getElementById('myCanvas');
13 if(canvas && canvas.getContext){ //判断Canvas对象是否为空
14 var ctx = canvas.getContext("2d"); //获取Canvas对象上下文
15 ctx.beginPath(); //开始一个新的绘制路径
16 ctx.arc(100,75,50,0,2*Math.PI); //设置圆坐标
17 ctx.stroke(); //绘制路径
18 }
19 </script>
20 </body>
21 </html>显示：
②绘制三角形
绘制三条直线，并设置三条直线的起点和终点相互连接
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8
9 <canvas id="myCanvas"></canvas>
10
11 <script type="text/javascript">
12 var canvas=document.getElementById('myCanvas');
13 if(canvas && canvas.getContext){ //判断Canvas对象是否为空
14 var ctx=canvas.getContext("2d"); //获取Canvas对象上下文
15 ctx.beginPath(); //开始一个新的绘制路径
16 ctx.moveTo(0,10); //设置三角形的起点
17 ctx.lineTo(200,20); //设置三角形的第二个起点
18 ctx.lineTo(280,100); //设置三角形的第三个起点起点
19 ctx.closePath(); //将三角形第三个点与起点连接
20 ctx.stroke(); //绘制路径
21 }
22 </script>
23 </body>
24 </html>显示：
③绘制圆角矩阵
将使用arcTo函数绘制圆角矩阵，arcTo（x1,x2,y1,y2,r）:绘制介于两个切线之间的圆弧，坐标点(x1,y1)为圆弧的起点坐标，（x2,y2）为圆弧的终点坐标，r为圆弧的半径。
1 <body>
2
3 <canvas id="myCanvas"></canvas>
4
5 <script type="text/javascript">
6 var canvas=document.getElementById("myCanvas");
7 if(canvas && canvas.getContext){
8 var ctx=canvas.getContext("2d");
9 ctx.beginPath();
10 ctx.moveTo(10,10); //在左上方开始
11 ctx.arcTo(100,10,100,20,10); //绘制右上方圆角
12 ctx.arcTo(100,110,90,110,10); //绘制右下方圆角
13 ctx.arcTo( 0,110,0,100,10); //绘制左下方圆角
14 ctx.arcTo( 0,10,10,10,10); //绘制左上方圆角
15 ctx.stroke();
16 }
17 </script>
18 </body>显示：
④绘制自定义图形
1 <body>
2
3 <canvas id="myCanvas"></canvas>
4
5 <script type="text/javascript">
6 var canvas=document.getElementById("myCanvas");
7 if(canvas && canvas.getContext){
8 var ctx=canvas.getContext("2d");
9 ctx.beginPath();
10 ctx.arc(75,75,50,0,Math.PI*2,true); //在左上方开始
11 ctx.moveTo(110,75);
12 ctx.arc(75,75,35,0,Math.PI,false); //在左上方开始
13 ctx.moveTo(65,65);
14 ctx.arc(60,65,5,0,Math.PI*2,true); //在左上方开始
15 ctx.moveTo(95,65);
16 ctx.arc(90,65,5,0,Math.PI*2,true); //在左上方开始
17
18 ctx.stroke();
19 }
20 </script>
21 </body>笑脸：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- android学习4-25 使用canvas绘制几何图形（在View内）
- Canvas绘制图形（一）
- 转自大神整理的文章-安卓自定义View进阶-canvas绘制图形
- 自定义View进阶-Canvas之绘制图形
- canvas学习：绘制图形1(canvas尺寸)
- 使用canvas绘制几何图形
- [置顶] HTML5 绘制图形 Canvas 与 SVG 的基本用法
- HTML5中使用canvas绘制复杂图形
- 自定义View，在Canvas上绘制几何图形
- 使用原生JavaScript的Canvas实现拖拽式图形绘制，支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形，不依赖任何库和插件，有演示demo
- Android画布和图形绘制---Canvas and Drawables（五）
- 自定义View-Canvas之绘制图形
- Android使用Canvas绘制2D图形基础
- Canvas绘制图形图像
- [Web Chart系列之一]Web端图形绘制SVG,VML, HTML5 Canvas 技术比较
- 使用Canvas绘制各种图形
- Canvas----绘制常用的基本图形
- canvas绘制图形
- Android隐喻（三) 图形绘制: Canvas、SurfaceView、Paint、Surface、SurfaceHolder、Bitmap
- canvas绘制旋转图形