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. activiti自己定义流程之整合（二）：使用angular js整合ueditor创建表单

    基础环境搭建完成,接下来就该正式着手代码编写了,在说代码之前.我认为有必要先说明一下activit自己定义流程的操作. 抛开自己定义的表单不谈.通过之前的了解,我们知道一个新的流程開始.是在启动流程实 ...

  2. mysql 存储过程时间月份减法

    declare startTime VARCHAR(19) default '2014-00-00 00:00:00'; declare tempTime VARCHAR(19) default NO ...

  3. 转：Android IOS WebRTC 音视频开发总结 （系列文章集合）

    随笔分类 - webrtc   Android IOS WebRTC 音视频开发总结(七八)-- 为什么WebRTC端到端监控很关键? 摘要: 本文主要介绍WebRTC端到端监控(我们翻译和整理的,译 ...

  4. 从TCP协议的原理来谈谈rst复位攻击

    在谈RST攻击前,必须先了解TCP:如何通过三次握手建立TCP连接.四次握手如何把全双工的连接关闭掉.滑动窗体是怎么数据传输的.TCP的flag标志位里RST在哪些情况下出现.以下我会画一些尽量简化的 ...

  5. golang map to struct

    http://stackoverflow.com/questions/26744873/converting-map-to-struct func SetField(obj interface{}, ...

  6. jquery+css 实现即时变化颜色主题（通过input输入颜色值进行改变）

    实现效果需要自行导入jquery.js <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  7. WeX5开发指南

    WeX5入门.UI2开发.App开发.服务端开发.扩展资料学习. 1 新手入门 1.1 运行WeX5的demo(视频) 1.2 App开发.调试.打包部署完整过程(视频) 1.3 创建第一个应用(视频 ...

  8. GTK入门学习：布局练习之计算器

    接下来,我们做一个布局练习.例如以下图: 我们用表格布局实现,表格布局參考坐标例如以下: 这里我们用到行编辑控件( GtkEntry ). 行编辑的创建: GtkWidget * gtk_entry_ ...

  9. Allegro基本操作——PCB布线

    转:http://blog.sina.com.cn/s/blog_1538bc9470102vyyq.html http://www.elecfans.com/article/80/110/2010/ ...

  10. 笔记04 WPF的Binding

    oneWay:使用 OneWay 绑定时,每当源发生变化,数据就会从源流向目标. OneTime: 绑定也会将数据从源发送到目标:但是,仅当启动了应用程序或 DataContext 发生更改时才会如此 ...