canvas(1)

canvas中级

  1. 绘制矩形

    • ctx.fillRect(x, y, width, height)

      • x, y 确定矩形左上角的 点坐标
      • width 确定矩形的宽度
      • height 确定矩形的高度

    • ctx.strokeRect(x, y, width, height)

      • 参数含义同上。

  2. 绘制圆弧

    • ctx.arc(x, y, radius, START ANGLE, END ANGLE, ANIT-CLOCKWISE(TRUE/FALSE) );

      • x, y 确定圆心坐标
      • radius 确定圆弧的半径
      • START ANGLE 指定绘制圆弧的起始弧度
      • END ANGLE 指定绘制的圆弧终止弧度
      • ANIT-CLOCKWISE(TRUE/FALSE) 指定是否逆时针绘制圆弧，默认值为 false。

    • ctx.arcTo(x1, y1, x2, y2, RADIUS)

      • moveTo(x, y)
      • arcTo():
      • 由（x, y）（x1, y2）（x2, y2）确定线段，绘制以RADIUS为半径的，并且和上面两条线段相切的圆弧

    • 如果移动了笔触，在绘制圆弧时，当前笔触所在点 会和 绘制圆弧的起始点 进行连线（lineTo）操作。

    • 弧度制

      • 360度 表示 一圈
      • 2 * Math.PI 一圈
      • 360 = 2 * Math.PI
      • 一弧度：Math.PI / 180
      • 一度 : 180 / Math.PI

  3. 绘制文字

    • ctx.fillText(“TEXT”, X POS, Y POS, maxWidth{optional);
    • ctx.strokeText(“TEXT”, X POS, Y POS, maxWidth{optional);

    • 参数

      • TEXT 要绘制的文本内容
      • （x, y） 指定绘制文本的位置
      • maxWidth 指定文本的最大宽度

    • font: 指定字体和大小 ‘20px Consolas’

    • textAlign

      • start 默认
      • end
      • left
      • right
      • center

    • textBaseline

      • alphabetic 默认
      • top
      • hanging
      • middle
      • ideographic
      • bottom
综合案例：绘制：大饼图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绘制带文字大饼图</title>
	<style>
		canvas {
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="600" height="400"></canvas>
</body>
<script>
	function toAngle( radian ) {
		return 180 * radian / Math.PI;
	}
	function toRadian( angle ) {
		return Math.PI * angle / 180;
	}
	var canvas = document.getElementById('canvas'),
		ctx = canvas.getContext('2d');

	var reqData = [{
		name: 'IE',
		value: 100
	}, {
		name: 'GC',
		value: 500
	}, {
		name: 'FF',
		value: 150
	}, {
		name: '360',
		value: 100
	}, {
		name: 'Saf',
		value: 50
	}, {
		name: "others",
		value: 100
	}];
	var sum = 0;
	reqData.forEach(function(v) {
		sum += v.value;		
	});
	reqData = reqData.map(function(v) {
		v.angle = v.value * Math.PI * 2 / sum;
		return v;
	}); 

	var startAngle = -Math.PI / 2;
	var colors = ('crimson,cyan,darkblue,darkcyan,darkgoldenrod,'+
						'darkgray,darkgreen,darkgrey,darkkhaki,darkmagenta').split(',');

	var radius = 120; 

	var textLine = 1.2 * radius;

	var textLineOut = 20;

	function renderPie() {
		for(var i = 0,l = reqData.length;i < l; i++){
			// 绘制大饼
			// 设置填充颜色
			ctx.fillStyle = colors[i];
			ctx.beginPath();
			// 绘制扇形饼的路径
			ctx.moveTo(canvas.width / 2, canvas.height / 2);
			ctx.arc(canvas.width / 2, canvas.height / 2, radius, 
					startAngle, startAngle + reqData[i].angle);
			ctx.fill();		

			// 绘制文字
			var x1, y1;
			x1 = textLine * Math.cos(startAngle + .5 * reqData[i].angle);
			y1 = textLine * Math.sin(startAngle + .5 * reqData[i].angle);
			
			ctx.save();
			ctx.translate(canvas.width / 2, canvas.height / 2);

			// 绘制线段
			var textOut = 8;
			ctx.lineWidth = 2;
			var textAlign = 'left';
			ctx.beginPath();
			ctx.moveTo(0, 0);
			ctx.lineTo(x1, y1);
			// 如果绘制的扇形饼在西半球
			if (x1 < 0) {
				textAlign = 'right';
				x1 -= textLineOut;
				textOut = -textOut;
			} else {// 如果绘制的扇形饼在东半球
				x1 += textLineOut;
			}
			
			ctx.lineTo(x1, y1);
			ctx.strokeStyle = colors[i];
			ctx.stroke();

			ctx.beginPath();			
			ctx.font = '16px Consolas';
			ctx.textAlign = textAlign;
			ctx.textBaseline = 'middle';
			ctx.fillText(reqData[i].name, x1 + textOut, y1);
			ctx.restore();

			// 更新下一次绘制扇形饼起始角度
			startAngle += reqData[i].angle;
		}
	}

	renderPie();
</script>
</html>
文章目录
  1. 1. canvas中级
    1. 1.0.0.1. 综合案例：绘制：大饼图
|