<!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. vue 使用 vue-awesome-swiper （基础版）

    1.0 安装 vue-awesome-swiper(稳定版本 2.6.7) npm install vue-awesome-swiper@2.6.7 --save 2.0 引入配置(全局使用) 2.1 ...

  2. jQuery_完成表格的隔行换色

    表格的颜色一样不利于区分,而利用jQuery则可以很方便的进行表格的隔行换色操作,原表如下: 这样看着很不方便,但是隔行换色之后非常便捷清楚. 代码如下: <!DOCTYPE html> ...

  3. opengl中相关的计算机图形变换矩阵之：齐次坐标 （摘编）

    模型视图变换(几何变换)矩阵: 1. 齐次坐标:两条平行线也可以相交. 在欧几里得空间中,两条平行线是无法相交的,但是在投影空间(Projective Space)这条定理就不再适用了. 比如上图中, ...

  4. MUI注

    1.调试模式: 边改边看:左侧显示代码,右侧实时观看修改效果.可以调出“浏览器控制台”观测数据变化效果. 真机运行:电脑和手机都安装“360手机助手”,手机安装“F:\Program Files\HB ...

  5. LeetCode_509.斐波那契数

    LeetCode-cn_509 509.斐波那契数 斐波那契数,通常用 F(n) 表示,形成的序列称为斐波那契数列.该数列由 0 和 1 开始,后面的每一项数字都是前面两项数字的和.也就是: F(0) ...

  6. jprofiler监控wls&was配置

    jprofiler简介: jprofiler的内存视图部分可以提供动态的内存使用状况更新视图和显示关于内存分配状况信息的视图.所有的视图都有几个聚集层并且能够显示现有存在的对象和作为垃圾回收的对象. ...

  7. leetcode-mid-sorting and searching -347. Top K Frequent Elements

    mycode   71.43% class Solution(object): def topKFrequent(self, nums, k): """ :type nu ...

  8. MAC截图工具

    截图快捷键 ctrl+shift+A

  9. html5获取位置信息,h5获取位置信息

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

  10. Burp Suite批量网页操作

    1.打开md5解密网站,并输入“21232F297A57A5A743894A0E4A801FC3”,不要点击[Decrypt It!] 1.启动Burp Suite,并设置浏览器代理 3.点击[Dec ...