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（）

实例

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 </head>

 <body>

 </body>

 </html><!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         canvas{background: #A9A9A0}

     </style>

 </head>

 <body>

     <canvas id="mycanvas" width="800px" height="600">

         您的浏览器暂不支持HTML5的canvas元素！！

     </canvas>

     <script type="text/javascript">

         //定义变量获取画布DOM

         var canvas=document.getElementById("mycanvas");

         //设置绘画环境为2d

         var context=canvas.getContext("2d");

         //1、先把轮廓画出来，大圆+小圆

         gradient1=context.createLinearGradient(400,100,400,500);

         gradient1.addColorStop(0,"#000000");

         gradient1.addColorStop(1,"#FFFFFF");

         context.fillStyle=gradient1;

         context.arc(400,300,200,Math.PI/2,Math.PI*1.5);

         context.arc(400,200,100,Math.PI*1.5,Math.PI*0.5);

         context.arc(400,400,100,Math.PI*1.5,Math.PI*0.5,true);//小圆

         context.fill();

         //画右边

         context.beginPath();

         gradient2=context.createLinearGradient(400,100,400,500);

         gradient2.addColorStop(0,"#FFFFFF");

         gradient2.addColorStop(1,"#000000");

         context.fillStyle=gradient2;

         context.arc(400,300,200,Math.PI/2,Math.PI*1.5,true);

         context.arc(400,400,100,Math.PI*1.5,Math.PI*0.5,true);

         context.arc(400,200,100,Math.PI*1.5,Math.PI*0.5);//小圆

         context.fill();

         //画太极图中间的两个小圆，两个小眼睛

         context.beginPath();

         gradient3=context.createRadialGradient(400,400,1,400,400,10);

         gradient3.addColorStop(0,"#FFFFFF");

         gradient3.addColorStop(1,"#000000");

         context.fillStyle=gradient3;

         context.arc(400,400,10,0,Math.PI*2);

         context.fill();

         //画上面那个圆

         context.beginPath();

         gradient4=context.createRadialGradient(400,200,1,400,200,10);

         gradient4.addColorStop(0,"#000000");

         gradient4.addColorStop(1,"#FFFFFF");

         context.fillStyle=gradient4;

         context.arc(400,200,10,0,Math.PI*2);

         context.fill();

     </script>

 </body>

 </html>

html5--5-14 阶段小练习：绘制太极图案的更多相关文章

  1. 基于HTML5实现五彩连珠小游戏

    今天给大家分享一款基于HTML5实现五彩连珠小游戏.这款游戏的规则:点击彩球移动到期望的位置,每移动一次,画面将随机出现3个新的彩球:当同一颜色的彩球连成5个一行或一列或一斜线时,这5个彩球同时消失, ...

  2. 微信小程序绘制分享图

    微信小程序绘制分享图例子: demo下载地址:https://gitee.com/v-Xie/wxCanvasShar 大致代码会再以下说明 实际开发项目: 基础知识点: 了解canvas基础知识 w ...

  3. CSS3绘制旋转的太极图案（一）

        实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...

  4. 一款由html5 canvas实现五彩小圆圈背景特效

    之前介绍了好几款html5 canvas实现的特效.今天要为大家介绍一款由html5 canvas实现五彩小圆圈背景特效.五彩的小圆圈渐显渐失的特效.效果图如下: 在线预览   源码下载 html代码 ...

  5. canvas——绘制解锁图案

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. Java之绘制艺术图案

    前面已经介绍过绘制方法.这里不再赘述. package com.caiduping; import java.awt.Color; import java.awt.Graphics; import j ...

  7. Java之绘制五环图案

    前面已经介绍过绘制方法.这里不再赘述. package com.caiduping; import java.awt.BasicStroke; import java.awt.Color; impor ...

  8. 纯php实现中秋博饼游戏（1）：绘制骰子图案

    最近公司中秋博饼(在厦门),自己没事也想玩玩,所以就想动手写了一个纯php实现的中秋博饼游戏,既然要纯php实现,就要用php来生成图案,所以第一步就先绘制骰子图案. 平时很少使用php绘图,不过查查 ...

  9. canvas一周一练 -- canvas绘制马尾图案 （5）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

随机推荐

  1. Java Web工程连接MySQL数据库及Tomcat服务器页面中文乱码

    Java Web工程连接MySQL数据库 一. 准备工作 1.下载连接MySQL数据库的JDBC (可以去官网下,也可以去百度云找) 2.将下载的jar文件复制到Tomcat的lib目录下 3.新建一 ...

  2. hadoop之hdfs------------------FileSystem及其源码分析

    FileSystem及其源码分析 FileSystem这个抽象类提供了丰富的方法用于对文件系统的操作,包括上传.下载.删除.创建等.这里多说的文件系统通常指的是HDFS(DistributedFile ...

  3. 使用find命令查找Linux中的隐藏文件的方法

    我们可以在Linux 或者 Unix 系统上使用 find 命令去查询所有(全部)隐藏文件 基本语法如下: 复制代码 代码如下: [root@dabu.info ~]#find /要查找的文/件/夹/ ...

  4. [反汇编练习] 160个CrackMe之035

    [反汇编练习] 160个CrackMe之035. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...

  5. C# PropertyGrid控件应用心得 【转】

    源文 : http://blog.csdn.net/luyifeiniu/article/details/5426960 c#stringattributesobjectmicrosoftclass ...

  6. 简学lingo（四）——实例篇

    本片将会接着上篇实例来写,如要參照能够看下上篇的http://blog.csdn.net/yzu_120702117/article/details/38453791 如有句法上的问题能够參照我之前总 ...

  7. 【Java编程】Java在dos窗体编译与运行的批处理

    近期在Java编程过程中,常常使用到dos窗体对程序进行编译与执行. 可是不方便之处在于每次都要输入命令进入将要编译的程序的文件夹(事实上也有简单的方法,在文章末尾给出).于是编写了一个配置文件,能够 ...

  8. MySQL的timeout那点事

    http://www.mysqlops.com/2011/11/24/mysql_timeout.html

  9. bootstrap table api

    http://blog.csdn.net/rickiyeat/article/details/56483577

  10. php中屏蔽date的错误

    php中添加  date_default_timezone_set('asia/shanghai'); 可以屏蔽 <?php echo date('Y-m-d',$row3['time']); ...