1
<canvas id="abc" width="600" height="1200"></canvas>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
//获取页面元素
var canvas = document.getElementById('abc');
//获取渲染上下文
var con = canvas.getContext('2d');
//阴影
con.shadowBlur = 20;
con.shadowColor = 'red';
con.shadowOffsetX = 20;
con.shadowOffsetY = 20;
//绘制头部背景
con.beginPath();
con.fillStyle = 'rgb(8,189,234)';
con.strokeStyle = 'black';
con.lineWidth = 2;
con.arc(300, 300, 200, 0, Math.PI * 2, false);
con.stroke();
con.fill();
//绘制脸
//去阴影
con.shadowBlur = 0;
con.shadowColor = 'white';
con.shadowOffsetX = 0;
con.shadowOffsetY = 0;
con.beginPath();
con.moveTo(300, 180);
con.bezierCurveTo(100, 180, 60, 450, 300, 465);
con.bezierCurveTo(540, 450, 500, 180, 300, 180);
con.strokeStyle = 'black';
con.stroke();
con.fillStyle = 'white';
con.fill();
//绘制右眼
con.beginPath();
con.moveTo(262, 145);
con.bezierCurveTo(212, 145, 212, 245, 262, 245);
con.bezierCurveTo(312, 245, 312, 145, 262, 145);
con.strokeStyle = 'black';
con.stroke();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX