<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>太极图</title>

</head>

<body>

    <canvas id="myCanvas" width="1300px" height="600px" style="background:gray">

        你的浏览器不支持canvas

    </canvas>

    <script type="text/javascript">

        var canvas=document.getElementById('myCanvas');

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

        // 太极图

        context.lineWidth=5;

        context.fillStyle="black";

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

        context.fill();

        context.beginPath();

        context.fillStyle="white";

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

        context.fill();

        context.beginPath();

        context.fillStyle="black";

        context.arc(400,200,100,Math.PI/2*3,Math.PI/2,false);

        context.fill();

        context.beginPath();

        context.fillStyle="white";

        context.arc(400,400,100,Math.PI/2,Math.PI/2*3,false);

        context.fill();

        // 两个小圆心

        context.beginPath();

        context.fillStyle="white";

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

        context.fill();

        context.beginPath();

        context.fillStyle="black";

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

        context.fill();

    </script>

</body>

</html>

1.利用canvas画一个太极图的更多相关文章

  1. 10分钟，利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  2. 利用canvas画一个实时时钟

    先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  3. Android利用canvas画各种图形

    Android利用canvas画各种图形(点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形) 本文链接:https://blog.csdn.net/rhljiayou/article/det ...

  4. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  5. 用Canvas画一个刮刮乐

    Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...

  6. 用canvas画一个的小画板（PC端移动端都能用）

    前言 本篇的内容主要包括: canvas标签简介 画板的功能简介 画板的JS部分(包括:1.获取画布 2.使画板全屏幕显示且自适应 3.如何绘制直线 4.绘画时的三种状态(鼠标点击.移动.离开)5.画 ...

  7. Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形) .

    1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, ...

  8. Android利用canvas画各种图形 及Paint用法 .

    引自:http://blog.csdn.net/carlfan/article/details/8139984 1.首先说一下canvas类: Class Overview The Canvas cl ...

  9. 使用H5 canvas画一个坦克

      具体步骤如下:   1. 首先做出绘图区,作为坦克的战场   <canvas id="floor" width="800px" height=&quo ...

随机推荐

  1. Oracle--单实例数据库迁移到RAC集群服务器（RMAN)

    单实例数据库版本:11.2.0.1 RAC实例数据库版本:11.2.0.3 1,在单实例数据库备份文件 RMAN> show all; using target database control ...

  2. 关于SQL注入的问题以及解决方法

    1.关于SQL注入 什么是SQL注入: 由于jdbc程序在执行的过程中sql语句在拼装时使用了由页面传入参数,如果用户恶意传入一些sql中的特殊关键字,会导致sql语句意义发生变化,这种攻击方式就叫做 ...

  3. 阶段3 1.Mybatis_01.Mybatis课程介绍及环境搭建_07.环境搭建的注意事项

    2 resources下面创建目录要一级一级的创建,下面这个创建的就是一级目录而不是三级 在文件夹下看到的目录也是一级的 因此这里创建目录需要一个个的去创建 配置文件和dao类这两个目录要保持一致,这 ...

  4. Linux监控命令之==>free

    一.命令说明 free 命令显示系统内存的使用情况:包括物理内存.交换内存(swap)和内核缓冲区内存 二.参数说明 -b -k -m -g:分别以字节.KB.MB.GB为单位显示内存使用情况 -l: ...

  5. 使用Postman对HTTP接口进行功能测试

    一.工具说明 Postman是一种网页调试与发送网页http请求的工具.我们可以用来很方便的模拟get或者post或者其他方式的请求来调试接口. 二.应用场景 1.Get请求 get请求通过接口参数拼 ...

  6. c++ 调用 sqlcipher

    #include <iostream> #include <string.h> #include "sqlite3.h" using namespace s ...

  7. java正则匹配正则表达式

    1.简单匹配小案例 public static void main( String[] args ){ // 按指定模式在字符串查找 String line = "This order wa ...

  8. java中public、private、protected区别

    类中的数据成员和成员函数据具有的访问权限包括:public.private.protect.friendly(包访问权限) 1.public:public表明该数据成员.成员函数是对所有用户开放的,所 ...

  9. docker--搭建docker swarm集群

    10 搭建docker swarm集群 10.1 swarm 介绍 Swarm这个项目名称特别贴切.在Wiki的解释中,Swarm behavior是指动物的群集行 为.比如我们常见的蜂群,鱼群,秋天 ...

  10. [转帖]APT34攻击全本分析

    APT34攻击全本分析 https://zhuanlan.kanxue.com/article-8401.htm 高手太多 我等菜鸟目不暇接.. 一.事件综述 2019年4月18日,黑客/黑客组织使用 ...