1 doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>无标题文档title>
6 head>
7
8 <body>
9 body>
10 html>DOCTYPE html>
11 <html lang="en">
12 <head>
13 <meta charset="UTF-8">
14 <title>Documenttitle>
15 <style type="text/css">
16 canvas{background: #A9A9A0}
17 style>
18 head>
19 <body>
20 <canvas id="mycanvas" width="500px" height="300">
21 您的浏览器暂不支持HTML5的canvas元素！！
22 canvas>
23 <script type="text/Javascript">
24 //定义变量获取画布DOM
25 var canvas=document.getElementById("mycanvas");
26 //设置绘画环境为2d
27 var context=canvas.getContext("2d");
28
29 //渐变色
30 //1、设置渐变色
31 var gradient=context.createRadialGradient(50,150,5,470,150,100);
32 //添加渐变色中的颜色
33 gradient.addColorStop(0,"#000000");
34 gradient.addColorStop(0.2,"#FF0000");
35 gradient.addColorStop(0.4,"#00FF00");
36 gradient.addColorStop(0.6,"#0000FF");
37 gradient.addColorStop(0.8,"#FF00FF");
38 gradient.addColorStop(1,"#FFFFFF");
39 //2、用设置好的渐变色来填充我们的日常图形就好
40 context.fillStyle=gradient;
41 context.fillRect(50,50,400,230);
42
43 //给扇子加渐变色
44 script>
45
46 <canvas id="mycanvas2" width="500px" height="300" >
47 您的浏览器暂不支持HTML5的canvas元素！！
48 canvas>
49 <script type="text/Javascript">
50 //定义变量获取画布DOM
51 var canvas=document.getElementById("mycanvas2");
52 //设置绘画环境为2d
53 var context=canvas.getContext("2d");
54
55 //渐变色
56 //1、设置渐变色
57 var gradient=context.createRadialGradient(250,150,10,250,150,100);
58 //添加渐变色中的颜色
59 gradient.addColorStop(0,"#000000");
60 gradient.addColorStop(0.2,"#FF0000");
61 gradient.addColorStop(0.4,"#00FF00");
62 gradient.addColorStop(0.6,"#0000FF");
63 gradient.addColorStop(0.8,"#FF00FF");
64 gradient.addColorStop(1,"#FFFFFF");
65 //2、用设置好的渐变色来填充我们的日常图形就好
66 context.fillStyle=gradient;
67 context.arc(250,150,100,0,Math.PI*2);
68 context.fill();
69 //给扇子加渐变色
70 script>
71 body>
72 html>
京公网安备 11010802041100号