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. PyTorch学习笔记之Tensors 2

    Tensors的一些应用 ''' Tensors和numpy中的ndarrays较为相似, 因此Tensor也能够使用GPU来加速运算 ''' # from _future_ import print ...

  2. Unable to lock the administration directory (/var/lib/dpkg/) is another process using it?

    I see pretty much all the answers recommend deleting the lock. I don't recommend doing that as a fir ...

  3. OpenCV学习教程入门篇&lt;一、介绍&gt;

    OpenCV,是Inter公司开发的免费开源专门因为图像处理和机器视觉的C/C++库,英文全称是Open Source Computer Vision. 1. 可视化语言Matlab与OpenCV都能 ...

  4. 百科知识 .e,.ec文件如何打开

    1 .e是易语言源文件,你可以从以下网址下载e语言编程环境: http://www.xiazaiba.com/html/409.html   2 安装之后会自动关联.e文件.   3 打开一个e语言文 ...

  5. 从零開始开发Android版2048 （二）获取手势信息

    今天是尝试開始Android版2048小游戏的第二天.在今天,我主要学习了怎样获取用户在屏幕滑动的手势,以及对布局进行了一些小小的完好. 获取用户操作的手势(比方向左滑.向右滑等)主要用到了Gestu ...

  6. DataTable和DataRow利用反射直接转换为Model对象的扩展方法类

    DataTable和DataRow利用反射直接转换为Model对象的扩展方法类   /// <summary> /// 类 说 明:给DataTable和DataRow扩展方法,直接转换为 ...

  7. [Codevs 1230]元素查找(手写哈希表)

    题目连接:http://codevs.cn/problem/1230/ 说白了就是要我们自己手写一个哈希表的数据结构来实现加入和查找功能.map也能直接过(我第一次写就是用map骗AC的) 提一下个人 ...

  8. 使用Python与数据库交互

    # -*- coding: utf-8 -*- """ Created on Sun Nov 18 19:25:01 2018 @author: wangm " ...

  9. inception安装步骤---自己整理的安装步骤

    inception安装步骤---自己整理的安装步骤2015-09-18 15:51 6185人阅读 评论(1) 收藏 举报 分类: inception相关版权声明:本文为博主原创文章,未经博主允许不得 ...

  10. THE MARTIAN

    影片的最后一段自白 When I was up there, stranded by myself …… “did I think I was going to die?” Yes, absolute ...