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
| <!doctype html>
<html>
<head>
<canvas width="1000" height="1000" style="background:blue" id='canvas'>
您的浏览器不支持canvas画布
</canvas>
<script>
//获取画布
var canvas=document.getElementById('canvas');
if (canvas.getContext)
{
var cxt = canvas.getContext('2d');
}
//画线段
cxt.beginPath();//开启路径
cxt.moveTo(20,20);//设置起点坐标
cxt.lineTo(20,200);//设置终点坐标
cxt.lineTo(200,200);
cxt.lineTo(200,20);
cxt.lineWidth = 1.0; // 设置线宽
cxt.strokeStyle = "#CC0000"; // 设置线的颜色
cxt.closePath();//关闭路径，使用此方法可以将当前点到起点封闭起来，省去一步cxt.lineTo(20,20);
cxt.stroke();//给线段着色
//画圆形
//画实心圆
cxt.beginPath();
cxt.arc(110,110,80,0,360,false);//ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
cxt.lineWidth = 10.0; // 设置线宽
cxt.strokeStyle="green";
cxt.stroke();
cxt.fillStyle="yellow";
cxt.fill();
cxt.closePath();
//画空心圆
cxt.beginPath();
cxt.arc(110,310,80,0,360,false);//ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
cxt.lineWidth = 1.0; // 设置线宽
cxt.strokeStyle="green";
cxt.stroke();
cxt.closePath();
//画矩形
//画空心矩形
cxt.beginPath();
cxt.rect(20,500,180,20);
cxt.stroke();
cxt.closePath();
//画空心矩形的另一种方法
cxt.strokeRect(20,540,180,20);
//画实心矩形
cxt.beginPath();
cxt.rect(20,580,180,20);
cxt.fill();
cxt.closePath();
//画实心矩形的另一种方法
cxt.fillRect(20,620,180,20);
//文字
//实心文字
cxt.font=("60px 宋体");
cxt.fillText("Hello World",20,700);
cxt.fill();
//空心文字
cxt.font=("60px 宋体");
cxt.strokeStyle="yellow";
cxt.strokeText("Hello World",20,800);
cxt.stroke();
//旋转
//设置旋转环境
cxt.save();
//转换参考点
cxt.translate(20,20);
//设置旋转角度 参数是弧度 角度*Math.PI/180
cxt.rotate(-10*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,0);
cxt.lineTo(0,180);
cxt.stroke();
cxt.closePath();
cxt.restore();
</script>
</head>
</html>
|