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. emacs 打开文件乱码

    emacs在win下写的文件在linux打开乱码 M-x set-language-environment RET   chinese-gb    改变当前编码 用当前编码重新打开 M-x rever ...

  2. Handler处理机制

    handler缺点:如果要运送两种类型的数据(比如一个Bitmap,一个Object)就不能运送,但可以用Bunder来传输  *    使用handler的步骤:  *    1.创建一个handl ...

  3. 《从0到1》读书笔记第一章&quot;未来的挑战&quot;第2记:做老子还是做孙子

    从1到N VS 从0到1 - 别让自己的小鸡鸡抓在别人的手上 近几年国内互联网创业上非常流行一种C2C(也就是Copy to China - 复制到中国)的创业模式,打的就是一个时间差和地域差.将在国 ...

  4. iOS经常使用设计模式——单例模式

    第一部分: 创建一个单例对象 单例的应用场景: 单例模式用于当一个类仅仅能有一个实例的时候. 通常情况下这个"单例"代表的是某一个物理设备比方打印机,或是某种不能够有多个实例同一时 ...

  5. Hazelcast与MongoDB集成

    Hazelcast与MongoDB集成 作者:chszs,未经博主同意不得转载.经许可的转载需注明作者和博客主页:http://blog.csdn.net/chszs 一.Hazelcast与Mong ...

  6. SMI#、SCI#信号在OS、BIOS、EC中的中断方式（Linux）

    EC资料有个很好的CSDN博客推荐去看看:zhao_longwei的专栏 EC固件代码架构:https://blog.csdn.net/zhao_longwei/article/details/510 ...

  7. shell grep正则匹配汉字

    Shell grep正则匹配中文 测试文本 demo_exe.c,内容如下,需要注意保存的编码格式,对输出到终端有影响: 我们中文操作系统ASNI默认是GBK的. #include<stdio. ...

  8. kubernetes容器探针检测

    系列目录 kubernetes提供了livenessProbe(可用性探针)和readinessProbe(就绪性探针)对容器的健康性进行检测,当然这仅仅简单的关于可用性方面的探测,实际上我们不仅仅要 ...

  9. php逻辑操作符中&和&&的异同

    php有5种算术操作符(+ - * / %),6种赋值操作符(+= -= *= /= %= .=),8种比较操作符(=== < > <= >= != <> !==) ...

  10. LeetCode(88)题解-- Merge Sorted Array

    https://leetcode.com/problems/merge-sorted-array/ 题目: Given two sorted integer arrays nums1 and nums ...