Canvas入门：绘制矩形圆直线曲线等基本图形
Posted jhcelue
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Canvas入门：绘制矩形圆直线曲线等基本图形相关的知识，希望对你有一定的参考价值。
来源：http://www.ido321.com/968.html
一、Canvas的基础知识
Canvas是html 5中新增的元素，专门用于绘制图形。canvas元素就相当于一块“画布”，一块无色的透明区域。须要利用javascript编写在当中进行绘画的脚本。
在页面放置canvas元素非常easy。利用<canvas>标签。同一时候指定几个主要的属性：id,width和height。接下来通过几个小案例，跟我入门canvas吧~~~^_^~~~
二、Canvas小案例（測试结果来自Google最新版本号）
1、绘制矩形
canvas.html:
1: <!DOCTYPE >
2: <html>
3: <head>
4: <meta charset="utf-8">
5: <title>canvas元素学习</title>
6: <script type="text/javascript" src="canvas.js">
7: </script>
8: </head>
9: <body>
10: <h3>canvas元素学习</h3>
11: <canvas id="canvas" width="400" height="300"></canvas>
12: </body>
13: </html>
canvas.js:
1: window.onload=function()
2: {
3: // 获取canvas 的ID
4: var canvas = document.getElementById(‘canvas‘);
5: if (canvas == null)
6: {
7: return false;
8: }
9: // 获取上下文
10: var context = canvas.getContext(‘2d‘);
11: // 设置填充的样式
12: context.fillStyle = "#eeeeff";
13:// 绘制矩形,以fillStyle填充。fillRect（strokeRect）前两个參数是矩形左上角位置,后两个參数各自是宽和高
//默认原点是canvas的左上角
14: context.fillRect(0,0,400,300);
15: context.fillStyle = ‘red‘;
16: // 设置边框的样式
17: context.strokeStyle = ‘blue‘;
18: // 设置边框大小
19: context.lineWidth = 2;
20: context.fillRect(50,50,100,100);
21: // 绘制矩形边框
22: context.strokeRect(50,50,100,100);
23: }
效果：
2、绘制圆形：使用路径绘制
1: // 获取canvas 的ID
2: var canvas = document.getElementById(‘canvas‘);
3: if (canvas == null)
4: {
5: return false;
6: }
7: // 获取上下文
8: var context = canvas.getContext(‘2d‘);
9: // 设置填充的样式
10: context.fillStyle = "#eeeeff";
11: // 绘制矩形,以fillStyle填充
12: context.fillRect(0,0,400,300);
13: for(var i = 0; i<9; i++)
14: {
15: // 创建路径
16: context.beginPath();
17: // 绘制圆形路径
18: context.arc(i*25, i*25, i*10, 0, Math.PI * 2, true);
19: // 关闭路径。假设不关闭，则图像会重叠
20: context.closePath();
21: context.fillStyle = ‘rgba(255,0,0,0.25)‘;
22: // 以fillStyle填充
23: context.fill();
24: }
arc()绘制圆弧。其參数例如以下
arc(x,y,radius,startAngle,endAngle,anticlockwise):x,y是圆弧的圆心位置，radius是半径，startAngle和endAngle是起始和结束的角度，单位是弧度（度数必须转为弧度），anticlockwise是一个布尔值，true表示顺时针绘制图像。false表示逆时针绘制。起始角度是0。结束角度是360（PI*2）就能够绘制圆形。
效果：
3、绘制直线
绘制直线用到moveTo()和lineTo()两个方法
1: // 获取canvas 的ID
2: var canvas = document.getElementById(‘canvas‘);
3: if (canvas == null)
4: {
5: return false;
6: }
7: // 获取上下文
8: var context = canvas.getContext(‘2d‘);
9: // 设置填充的样式
10: context.fillStyle = "#eeeeff";
11: // 绘制矩形,以fillStyle填充
12: context.fillRect(0,0,400,300);
13: context.beginPath();
//參数线的起点坐标
14: context.moveTo(50,50);
//參数线的终点坐标
15: context.lineTo(100,100);
16: context.closePath();
//关闭路径之后绘制图形
17: context.strokeStyle = ‘red‘;
18: context.stroke();
效果：
绘制一个复杂点的
1: // 获取canvas 的ID
2: var canvas = document.getElementById(‘canvas‘);
3: if (canvas == null)
4: {
5: return false;
6: }
7: // 获取上下文
8: var context = canvas.getContext(‘2d‘);
9: // 设置填充的样式
10: context.fillStyle = "#eeeeff";
11: // 绘制矩形,以fillStyle填充
12: context.fillRect(0,0,400,300);
13: var dx = 150;
14: var dy = 150;
15: var s = 100;
16: // 创建路径
17: context.beginPath();
18: context.fillStyle = ‘rgb(100,255,100)‘;
19: context.strokeStyle = ‘rgb(0,0100)‘;
20: var x = Math.sin(0);
21: var y = Math.cos(0);
22: var dig = Math.PI/15 *11;
23: for (var i = 0; i < 30; i++) {
24: var x = Math.sin(i * dig);
25: var y = Math.cos(i * dig);
26: context.lineTo(dx+x*s,dx+y*s);
27: }
28: context.closePath();
29: context.fill();
30: context.stroke();
效果：
4、绘制曲线：利用bezierCurveTo绘制贝济埃曲线
bezierCurveTo能够绘制曲线，是lineTo的曲线版本号
1: // 获取canvas 的ID
2: var canvas = document.getElementById(‘canvas‘);
3: if (canvas == null)
4: {
5: return false;
6: }
7: // 获取上下文
8: var context = canvas.getContext(‘2d‘);
9: // 设置填充的样式
10: context.fillStyle = "#eeeeff";
11: // 绘制矩形,以fillStyle填充
12: context.fillRect(0,0,400,300);
13: var dx = 150;
14: var dy = 150;
15: var s = 100;
16: // 创建路径
17: context.beginPath();
18: context.fillStyle = ‘rgb(100,255,100)‘;
19: context.strokeStyle = ‘rgb(0,0100)‘;
20: var x = Math.sin(0);
21: var y = Math.cos(0);
22: var dig = Math.PI/15 *11;
23: context.moveTo(dx,dy);
24: for (var i = 0; i < 30; i++) {
25: var x = Math.sin(i * dig);
26: var y = Math.cos(i * dig);
27: context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);
28: }
29: context.closePath();
30: context.fill();
31: context.stroke();
效果
以上是关于Canvas入门：绘制矩形圆直线曲线等基本图形的主要内容，如果未能解决你的问题，请参考以下文章
IOS用CGContextRef画各种图形(文字圆直线弧线矩形扇形椭圆三角形圆角矩形贝塞尔曲线图片)(转)