HTML5学习-canvas绘制表情

开发工具：IntelliJ IDEA

实现效果：如下

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript">
 7         function draw(id)
 8         {
 9             var canvas=document.getElementById(id);
10             var ctx=canvas.getContext("2d");
11             ctx.fillStyle="rgb(255,255,0)";
12             ctx.beginPath();
13             ctx.arc(300,300,250,0,2*Math.PI,true);
14             ctx.closePath();
15             ctx.fill();
16             //嘴巴
17             ctx.lineWidth=2;
18             ctx.beginPath();
19             ctx.arc(300,400,80,0,Math.PI,false);
20             ctx.stroke();
21 
22             //绘制文本
23             ctx.font="35px Verdana";
24             var grd2=ctx.createLinearGradient(400,80,520,120);
25             grd2.addColorStop(0,"rgb(255,255,0)");
26             grd2.addColorStop(0.5,"rgb(255,0,255)");
27             grd2.addColorStop(1,"rgb(0,255,255)");
28             ctx.strokeStyle=grd2;
29             ctx.strokeText("Hello Jack!",400,80);
30            //绘制左眼的园
31             drawCircle(ctx,200-50*Math.sin(45*Math.PI/180)/2,220-50*Math.sin(45*Math.PI/180)/2,25,0.75,1.75,false,255,0,0)
32             drawCircle(ctx,200+50*Math.sin(45*Math.PI/180)/2,220-50*Math.sin(45*Math.PI/180)/2,25,0.25,1.25,true,255,0,0)
33             //绘制右眼的园
34             drawCircle(ctx,400-50*Math.sin(45*Math.PI/180)/2,220-50*Math.sin(45*Math.PI/180)/2,25,0.75,1.75,false,255,0,0)
35             drawCircle(ctx,400+50*Math.sin(45*Math.PI/180)/2,220-50*Math.sin(45*Math.PI/180)/2,25,0.25,1.25,true,255,0,0)
36 
37 
38             //method 1
39 //            ctx.translate(200,220)
40 //            ctx.rotate(45*Math.PI/180);
41 //            ctx.fillRect(-25,-25,50,50);
42 //            ctx.rotate(-45*Math.PI/180);
43 //            ctx.translate(200,0);
44 //            ctx.rotate(45*Math.PI/180);
45 //            ctx.fillRect(-25,-25,50,50);
46 
47             //method 2
48             ctx.save();
49             ctx.translate(200,220)
50             ctx.rotate(45*Math.PI/180);
51             ctx.fillRect(-25,-25,50,50);
52             ctx.restore()
53             ctx.translate(400,220)
54             ctx.rotate(45*Math.PI/180);
55             ctx.fillRect(-25,-25,50,50);
56 
57         }
58         function drawCircle(ctx,x,y,r,start,end,anti,re,gr,bl)
59         {
60             ctx.fillStyle="rgb("+re+","+gr+","+bl+")";
61             ctx.beginPath();
62             ctx.arc(x,y,r,Math.PI*start,Math.PI*end,anti);
63             ctx.closePath();
64             ctx.fill();
65         }
66     </script>
67 </head>
68 <body onload="draw('canvas')">
69 <canvas id="canvas" width="600px" height="600px"></canvas>
70 </body>
71 </html>

View Code

开发工具：IntelliJ IDEA

实现效果：如下

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript">
 7         function draw(id)
 8         {
 9             var canvas=document.getElementById(id);
10             var ctx=canvas.getContext("2d");
11             ctx.fillStyle="rgb(255,255,0)";
12             ctx.beginPath();
13             ctx.arc(300,300,250,0,2*Math.PI,true);
14             ctx.closePath();
15             ctx.fill();
16 
17 
18 
19             //左眼
20             drawCircle(ctx,200,220,70,2,false,0,0,0);
21             drawCircle(ctx,200,220,67,2,false,255,255,255);
22             drawCircle(ctx,200,250,40,2,false,0,0,0);
23             //右眼
24             drawCircle(ctx,400,220,70,2,false,0,0,0);
25             drawCircle(ctx,400,220,67,2,false,255,255,255);
26             drawCircle(ctx,400,250,40,2,false,0,0,0);
27             //嘴巴
28             ctx.lineWidth=2;
29             ctx.beginPath();
30             ctx.arc(300,400,80,0,Math.PI,false);
31             ctx.stroke();
32 
33             //绘制文本
34             ctx.font="35px Verdana";
35             var grd2=ctx.createLinearGradient(400,80,520,120);
36             grd2.addColorStop(0,"rgb(255,255,0)");
37             grd2.addColorStop(0.5,"rgb(255,0,255)");
38             grd2.addColorStop(1,"rgb(0,255,255)");
39             ctx.strokeStyle=grd2;
40             ctx.strokeText("Hello Jack!",400,80);
41 
42 
43 
44 
45         }
46     function drawCircle(ctx,x,y,r,i,anti,re,gr,bl)
47     {
48         ctx.fillStyle="rgb("+re+","+gr+","+bl+")";
49         ctx.beginPath();
50         ctx.arc(x,y,r,0,Math.PI*i,anti);
51         ctx.closePath();
52         ctx.fill();
53     }
54     </script>
55 </head>
56 <body onload="draw('canvas')">
57 <canvas id="canvas" width="600px" height="600px"></canvas>
58 </body>
59 </html>

View Code