1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 </head>
9 <body>
10 <canvas id="myCanvas" width="300" height="300" style="border:1px solid black"></canvas>
11 <img id="scream" src="https://www.runoob.com/try/demo_source/img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
12 <script>
13 var c=document.getElementById("myCanvas");
14 var ctx=c.getContext("2d");
15 // 区块着色：
16 // var c=document.getElementById("myCanvas");
17 // var ctx=c.getContext("2d");
18 // ctx.fillStyle="#ff0000";
19 // ctx.fillRect(0,0,150,75);
20
21 // 画线算法：
22 // var c=document.getElementById("myCanvas");
23 // var ctx=c.getContext("2d");
24 // ctx.moveTo(0,0);
25 // ctx.lineTo(100,200);
26 // ctx.stroke();
27
28 // 画圆算法：
29 // var c=document.getElementById("myCanvas");
30 // var ctx=c.getContext("2d");
31 // ctx.beginPath();
32 // ctx.arc(95,50,40,0,2*Math.PI);
33 // ctx.stroke();
34
35 // 实体文本绘制:
36 // var c=document.getElementById("myCanvas");
37 // var ctx=c.getContext("2d");
38 // ctx.font="20px Arial";
39 // ctx.fillText("HELLO WORD",10,50);
40
41 // 虚线文本绘制：
42 // var c=document.getElementById("myCanvas");
43 // var ctx=c.getContext("2d");
44 // ctx.font="20px Arial";
45 // ctx.strokeText("HELLO WORD",40,60);
46
47 // 渐变：
48 // 线性渐变：
49 // // 创建渐变：
50 // var c=document.getElementById("myCanvas");
51 // var ctx=c.getContext("2d");
52 // var grd=ctx.createLinearGradient(0,0,200,0);
53 // grd.addColorStop(0,"skyblue");
54 // grd.addColorStop(1,"pink");
55 // // 填充渐变：
56 // ctx.fillStyle=grd;
57 // ctx.fillRect(10,10,150,80);
58
59 // 径向渐变：
60 // // 创建渐变：
61 // var c=document.getElementById("myCanvas");
62 // var ctx=c.getContext("2d");
63 // var grd=ctx.createRadialGradient(75,50,5,90,60,100);
64 // grd.addColorStop(0,"skyblue");
65 // grd.addColorStop(1,"pink");
66 // // 填充渐变:
67 // ctx.fillStyle=grd;
68 // ctx.fillRect(10,10,150,80);
69
70 // 图像画布：(drawImage(img,x,y))
71 // var c=document.getElementById("myCanvas");
72 // var ctx=c.getContext("2d");
73 // var img=document.getElementById("scream");
74 // img.onload=function() {
75 // ctx.drawImage(img,10,10);
76 // }
77
78 </script>
79 </body>
80 </html>
