L3F.WIN

Github及Hexo的使用

0%

HTML5与CSS3权威指南，代码汇总

发表于

HTML5与CSS3权威指南，代码汇总

Canvas 绘制矩形

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
<!DOCTYPE html>
<html lang="zh" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>HTML5, CSS3权威指南——canvas</title>
</head>

<body onload="draw('canvas')">
  <article>
    <h1>canvas元素示例</h1>
    <canvas id="canvas" width="400" height="300"></canvas>
  </article>
  <script>
    function draw(id) {
      var canvas = document.getElementById(id);
      if (canvas == null) {
        return false;
      }
      var context = canvas.getContext('2d');
      context.fillStyle = "#EEEEFF";
      context.fillRect(0, 0, 400, 300);
      context.fillStyle = "red";
      context.strokeStyle = "blue";
      context.lineWidth = 1;
      context.fillRect(50, 50, 100, 100);
      context.strokeRect(50, 50, 100, 100);
    }
  </script>
</body>

</html>

绘制矩形

Canvas 绘制圆形

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
<!DOCTYPE html>
<html lang="zh" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>HTML5, CSS3权威指南——canvas</title>
</head>

<body onload="draw('canvas')">
  <article>
    <h1>canvas元素示例</h1>
    <canvas id="canvas" width="400" height="300"></canvas>
  </article>
  <script>
      function draw(id) {
      var canvas = document.getElementById(id);
      if (canvas == null) {
        return false;
      }
      var context = canvas.getContext('2d');
      context.fillStyle = "#EEEEFF";
      context.fillRect(0, 0, 400, 300);
      var n = 0;
      for(var i = 0; i < 10; i++){
        context.beginPath();
        context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
        context.closePath();
        context.fillStyle = 'rgba(255,0,0,.25)';
        context.fill();
      }
    }
  </script>
</body>

</html>

arc()方法创建弧/曲线， 其参数为(x, y, r, sAngle, eAngle, counterclockwise)。 x为x坐标， y为y坐标， r为半径， sAngle起始角， eAngle结束角 ，圆的起始角都为0， counterclockwise为顺时针还是逆时针

绘制圆形

绘制复杂图形

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
<!DOCTYPE html>
<html lang="zh" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>HTML5, CSS3权威指南——canvas</title>
</head>

<body onload="draw('canvas')">
  <article>
    <h1>canvas元素示例</h1>
    <canvas id="canvas" width="400" height="300"></canvas>
  </article>
  <script>
    function draw(id) {
      var canvas = document.getElementById(id);
      if (canvas == null) {
        return false;
      }
      var context = canvas.getContext('2d');
      context.fillStyle = "#EEEEFF";
      context.fillRect(0, 0, 400, 300);
      var n = 0;
      var dx = 150;
      var dy = 150;
      var s = 100;
      context.beginPath();
      context.fillStyle = 'rgb(100,255,100)';
      context.strokeStyle = 'rgb(0,0,100)';
      var x = Math.sin(0);
      var y = Math.cos(0);
      var dig = Math.PI / 15 * 11;
      for(var i=0; i<30; i++){
        var x = Math.sin(i * dig);
        var y = Math.cos(i * dig);
        context.lineTo(dx + x * s, dy + y * s);
      }
      context.closePath();
      context.fill();
      context.stroke();
    }
  </script>
</body>

</html>

绘制复杂图形

绘制贝济埃曲线

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
<!DOCTYPE html>
<html lang="zh" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>HTML5, CSS3权威指南——canvas</title>
</head>

<body onload="draw('canvas')">
  <article>
    <h1>canvas元素示例</h1>
    <canvas id="canvas" width="400" height="300"></canvas>
  </article>
  <script>
    function draw(id) {
      var canvas = document.getElementById(id);
      if (canvas == null) {
        return false;
      }
      var context = canvas.getContext('2d');
      context.fillStyle = "#EEEEFF";
      context.fillRect(0, 0, 400, 300);
      var n = 0;
      var dx = 150;
      var dy = 150;
      var s = 100;
      context.beginPath();
      context.globalCompositeOperation = 'and';
      context.fillStyle = 'rgb(100,255,100)';
      var x = Math.sin(0);
      var y = Math.cos(0);
      var dig = Math.PI / 15 * 11;
      context.moveTo(dx, dy);
      for(var i=0; i<30; i++){
        var x = Math.sin(i * dig);
        var y = Math.cos(i * dig);
        context.bezierCurveTo(dx + x * s, dy + y * s -100, dx + x * s + 100, dy + y * s, dx + x * s, dy + y * s);
        context.closePath();
        context.fill();
        context.stroke();
      }
    }
  </script>
</body>

</html>

绘制贝济埃曲线

绘制渐变图形

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
<!DOCTYPE html>
<html lang="zh" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>HTML5, CSS3权威指南——canvas</title>
</head>

<body onload="draw('canvas')">
  <article>
    <h1>canvas元素示例</h1>
    <canvas id="canvas" width="400" height="300"></canvas>
  </article>
  <script>
    function draw(id) {
      var canvas = document.getElementById(id);
      if (canvas == null) {
        return false;
      }
      var context = canvas.getContext('2d');
      var g1 = context.createLinearGradient(0,0,0,300); //创建线性渐变对象
      g1.addColorStop(0, 'rgb(255,255,0)'); //添加起点颜色
      g1.addColorStop(1, 'rgb(0,255,255)'); //添加结束点颜色
      context.fillStyle = g1;
      context.fillRect(0, 0, 400, 300);
      var n = 0;
      var g2 = context.createLinearGradient(0,0,300,0);
      g2.addColorStop(0, 'rgba(0,0,255,0.5)');
      g2.addColorStop(1, 'rgba(255,0,0,0.5)');
      for(var i=0; i<10; i++){
        context.beginPath();
        context.fillStyle = g2;
        context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
        context.closePath();
        context.fill();
      }
    }
  </script>
</body>

</html>

绘制渐变图形