微信扫一扫打赏支持

html5--5-14 阶段小练习：绘制太极图案

html5--5-14 阶段小练习：绘制太极图案

 

学习要点

    运用前几节课的知识完成一个小练习

这个图案有多种不同的绘制方法，这里只做一个简单的演示，练习的时候可以自己思考一下，尝试其他的方法，或者对这个图案进行进一步的美化。

渐变色绘制方法

    1. createLinearGradient() 创建线性渐变
      • createLinearGradient(x1,y1,x2,y2)---颜色渐变的起始坐标和终点坐标
      • addColorStop(位置,"颜色值")---0表示起点...插入点...1表示终点，配置颜色停止点
    2. createRadialGradient(x1,y1,r1,x2,y2,r2,) 创建放射状/环形的渐变
    3. ....


文字的绘制方法

    1. strokeText("文字"，x,y,maxWith) 绘制（描边）空心文字
    2. fillText("文字"，x,y,maxWith) 绘制实心
    3. 字体样式：font="大小 字体 ..."


矩形的绘制方法

    1. rect(x,y,w,h)创建一个矩形
    2. strokeRect(x,y,w,hx,y,w,h) 绘制矩形（无填充）
    3. fillRect(x,y,w,h) 绘制"被填充"的矩形
    4. stroke() 绘制已定义的路径
    5. fill()绘制一个实心的（带填充的图形）


Canvas的路径方法

    1. moveTo() 定义绘制路径的起点(在直线中就是定义直线的起点)
    2. lineTo() 添加一个新点，(在我们的直线案例中就是定义直线的终点，但是后边继续绘制的话，它就变成中间点)
    3. stroke() 绘制已定义的路径
    4. fill()绘制一个实心的（带填充的图形）
    5. beginPath() 用来创建新的路径
    6. closePath() 从当前点回到起始点的来封闭路径
    7. arc(x,y,r,开始角度，结束角度，true/false) ：创建圆弧/曲线（用于创建圆形或部分圆）


绘制直线段流程:

    1. 在HTML5文档中添加canvas元素，并且设置的宽高和ID
    2. 在canvas元素中添加提示语句，让不支持canvas的浏览器能够显示友好的提示语句
    3. 添加script元素
    4. 获取画布/设置绘图绘图环境：此为固定语句，暂时记住、了解即可，后续课程还会继续讲解
      1. 指定线宽:lineWidth= 数值
      2. 指定颜色：strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
    5. 设定起点：moveTo(x坐标,y坐标)
    6. 设定终点：lineTo(x坐标,y坐标)
    7. 开始绘制：stroke()


绘制矩形流程：

    1. 在HTML5文档中添加canvas元素，并且设置的宽高和ID
    2. 在canvas元素中添加提示语句，让不支持canvas的浏览器能够显示友好的提示语句
    3. 添加script元素
    4. 获取画布/设置绘图绘图环境：此为固定语句，暂时记住、了解即可，后续课程还会继续讲解
      • 绘制空心矩形
        1. 指定线宽:lineWidth= 数值
        2. 指定轮廓颜色：strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
        3. 设定矩形的基本参数：strokeRect(x,y;width,height)
      • 绘制填充矩形
        1. 指定填充颜色：fillStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
        2. 设定矩形的基本参数：fillRect(x,y;width,height)


绘制圆

  1. 在HTML5文档中添加canvas元素，并且设置的宽高和ID
  2. 在canvas元素中添加提示语句
  3. 添加script元素
  4. 获取画布/设置绘图绘图环境
  5. 指定线宽:lineWidth= 数值
  6. 指定颜色：fill/strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
  7. 设定圆的基本参数：
    • 圆心的坐标:x,y
    • 圆的半径：数值
    • 起始弧度和终止弧度：角度值1，角度值2
    • 绘制方向：true（逆时针）/false（顺时针）
  8. 开始绘制：stroke()/fill（）

 

实例

 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>Document</title>
15     <style type="text/css">
16         canvas{background: #A9A9A0}
17     </style>
18 </head>
19 <body>
20     <canvas id="mycanvas" width="800px" height="600">
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         //1、先把轮廓画出来，大圆+小圆
29         gradient1=context.createLinearGradient(400,100,400,500);
30         gradient1.addColorStop(0,"#000000");
31         gradient1.addColorStop(1,"#FFFFFF");
32         context.fillStyle=gradient1;
33         context.arc(400,300,200,Math.PI/2,Math.PI*1.5);
34         context.arc(400,200,100,Math.PI*1.5,Math.PI*0.5);
35         context.arc(400,400,100,Math.PI*1.5,Math.PI*0.5,true);//小圆
36         context.fill();
37 
38         //画右边
39         context.beginPath();
40         gradient2=context.createLinearGradient(400,100,400,500);
41         gradient2.addColorStop(0,"#FFFFFF");
42         gradient2.addColorStop(1,"#000000");
43         context.fillStyle=gradient2;
44         context.arc(400,300,200,Math.PI/2,Math.PI*1.5,true);
45         context.arc(400,400,100,Math.PI*1.5,Math.PI*0.5,true);
46         context.arc(400,200,100,Math.PI*1.5,Math.PI*0.5);//小圆
47         context.fill();
48 
49         //画太极图中间的两个小圆，两个小眼睛
50         context.beginPath();
51         gradient3=context.createRadialGradient(400,400,1,400,400,10);
52         gradient3.addColorStop(0,"#FFFFFF");
53         gradient3.addColorStop(1,"#000000");
54         context.fillStyle=gradient3;
55         context.arc(400,400,10,0,Math.PI*2);
56         context.fill();
57 
58         //画上面那个圆
59         context.beginPath();
60         gradient4=context.createRadialGradient(400,200,1,400,200,10);
61         gradient4.addColorStop(0,"#000000");
62         gradient4.addColorStop(1,"#FFFFFF");
63         context.fillStyle=gradient4;
64         context.arc(400,200,10,0,Math.PI*2);
65         context.fill();
66     </script>
67     
68 </body>
69 </html>
View Code

 

posted @ 2017-12-05 10:59  范仁义  阅读(777)  评论(0)  编辑  收藏  举报